2012-09-18 54 views
2

大家好我目前有一个网站,有一个按钮和一些JavaScript,创建一个加载外观,然后运行这个动作结果。我想向actionresult添加参数,但不知道如何去做。谢谢!这里是我的代码 控制器:将参数添加到Razor中的URL.Action

[HttpPost] 
    public ActionResult PostMethod(string MyText) 
    { 
     System.Threading.Thread.Sleep(5000); 

     return Json("And were done"); 
    } 

查看:

<input type="text" name="MyTextBlock"/> 
<p id="PID"> 
Default message from declarative syntax. 
</p> 
<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; 
top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001; 
opacity: .8; filter: alpha(opacity=70);display:none" > 
<p style="position: absolute; top: 30%; left: 45%; color: White;" align="center"> 
    <img src="../../Content/themes/base/images/ajax-loading.gif"><br /> 
    Loading, please wait... 
</p> 
</div> 

<button onclick="JavascriptFunction();">HTTPPost Button</button> 

<script type="text/javascript" language="javascript"> 
function JavascriptFunction() { 
    var url = '@Url.Action("PostMethod", "MyTextBlock", new { MyText = "john" })'; 
    $("#divLoading").show(); 
    $.post(url, null, 
      function (data) { 
       $("#PID")[0].innerHTML = data; 
       $("#divLoading").hide(); 
      }); 
} 
</script> 

我想要做的就是通过MyTextBox到的PostMethod使用它作为MYTEXT。其他一些例子,我看到硬编码的值,我希望它来自文本框。任何帮助是极大的赞赏。谢谢!

回答

2

看起来您似乎正在尝试手动编写许多MVC已经为您处理的代码。试试这个......

首先,为您的视图创建一个模型。你可以随心所欲地调用它。将您想要的属性放入您的操作方法中。

YourModel.cs

public class YourModel 
{ 
    public string MyText { get;set; } 
} 

对于你的控制器,你就必须改变两件事情。该页面的GET操作需要传递给它的模型,如下所示。

对于POST操作,请将您的string MyText参数更改为YourModel model。这将允许MVC将您的视图上的输入绑定到模型。

操作方法

public class YourController 
{ 
    [HttpGet] 
    public ActionResult PostMethod() 
    { 
     YourModel model = new YourModel(); 
     return View(model); 
    } 

    [HttpPost] 
    public ActionResult PostMethod(YourModel model) 
    { 
     //Do something with model.MyText; 
     System.Threading.Thread.Sleep(5000); 
     return Json("And We're Done"); 
    } 
} 

PostMethod.cshtml

//THIS LINE HERE IS THE MOST IMPORTANT 
@model YourNamespace.YourModel 
//Ajax will handle most of the calling and showing of your elements if you tell it what to do! 
@using(Ajax.BeginForm(new AjaxOptions(){ LoadingElementId="divloading", OnSuccess="OnSuccessFunction" })) 
{ 
    <input type="text" name="MyText"/> 
    //Quick note: If you decide to hand code your html, make sure your <input/> name attributes match the property names on your model object. 
    //Or here you could do @Html.TextBoxFor(m => m.MyText) 
    <p id="PID"> 
    Default message from declarative syntax. 
    </p> 
    <div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; 
    top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001; 
    opacity: .8; filter: alpha(opacity=70);display:none" > 
    <p style="position: absolute; top: 30%; left: 45%; color: White;" align="center"> 
     <img src="../../Content/themes/base/images/ajax-loading.gif"><br /> 
     Loading, please wait... 
    </p> 
    </div> 

    <input type="submit" name="Submit" value="HTTPPost Button"/> 

    <script type="text/javascript" language="javascript"> 
    function OnSuccessFunction(data, textStatus, jqXHR){ 
     $("#PID")[0].innerHtml = data; 
    } 
    </script> 
} 

您的JS没有,如果你添加更多的属性来改变做这种方式是现在的一些好处你的模型。您只需使用HtmlHelper将另一个输入添加到视图中,或者使用名称属性手动编码输入名称,该名称属性等于模型上属性的名称。 MVC将处理其余的事情。

3

Razor是在页面加载之前生成的,所以如果你想在加载页面之后想要一个文本框,你需要使用javascript(也就是说,如果最终用户将改变MyTextBox的值并且你想通过这个使用AJAX的新值)。

而不是通过null作为您的数据参数在$.post,这是您将获取值MyTextBox并将其传递给该操作的位置。例如:

var url = '@Url.Action("PostMethod")'; 
var data = $('input[name="MyTextBox"]').serialize(); 
$.post(url, data, function(data){ 

}); 
+0

我该如何添加多个控件? – Badmiral