2012-09-18 77 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