在Razor中向URL.Action添加参数

Question

Hi all Currently I have a website that has a button and some javascript that creates a loading look and then runs this actionresult. I want to add parameters to actionresult but not sure how to do it. Thanks! Here is my code Controller:

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

        return Json("And were done");
    }

View:

<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>

What I want to do is pass MyTextBox into PostMethod to use it as MyText. Some of the other examples I have seen hardcode in values where I want it to be from the textbox. Any help is greatly appreciated. Thanks!

Answer 1

Razor is generated before page load, so if you want a textbox after the page is loaded you need to use javascript (that is to say if the end-user will be changing the value of MyTextBox and you want to pass this new value using AJAX).

Instead of passing null as your data argument in $.post , this is where you would grab the value of MyTextBox and pass it to the action. For example:

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

});

Answer 2

It seems like you're trying to hand code a lot of what MVC already handles for you. Try this out...

First out, create a model for your view. You can call this whatever you want. Put the properties that you want as your parameters to your action method in here.

YourModel.cs

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

For your controller, you'll have to change two things. The GET action for the page will need a model passed to it, like shown below.

For the POST action, change your string MyText parameter to YourModel model . This will allow MVC to bind your inputs on your view to the model.

Action Method

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>
}

Some benefits of doing it this way is now your JS doesn't have to change if you add more properties to your model. You just add another input to your view using either the HtmlHelper or hand code the input name with the name attribute equal to the name of the property on your model. MVC will handle the rest.