在Razor中向URL.Action添加参数

时间:2012-09-18 13:08:39

标签: c# javascript razor actionresult

大家好我现在有一个网站,有一个按钮和一些javascript,创建一个加载外观,然后运行此actionresult。我想为actionresult添加参数但不知道如何做到这一点。谢谢!这是我的代码 控制器:

    [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 个答案:

答案 0 :(得分:3)

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

不是在null中将$.post作为数据参数传递,而是在此处获取MyTextBox的值并将其传递给操作。例如:

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

});

答案 1 :(得分: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向视图添加另一个输入,或者使用name属性等于模型属性名称的输入名称手动编码。 MVC将处理剩下的事情。