ASP.NET MVC：從視圖傳遞數據到控制器（Ajax vs jQuery）

這個問題之前已經被問過了，但我沒有回顧過這個問題給出了一個清晰或完整的解決方案。我希望你能幫助我。
我想將使用AjaxHelper從客戶端（輸入文本字段）輸入的數據傳遞到服務器。如果有更優雅的解決方案，請回復與我的示例相關的代碼。
我也嘗試使用Ajax.BeginForm（）沒有成功。請記住，這裏有兩個按鈕。一個動態追加用戶在輸入字段下輸入的內容。第二個按鈕僅僅是一個簡單的非AJAX帖子給控制器。
使用Ajax.ActionLink（）和部分視圖「_NewRow.cshtml」動態添加項目以定義標記。ASP.NET MVC：從視圖傳遞數據到控制器（Ajax vs jQuery）

這裏是我的Index.cshtml：

@model MyAccount 
@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary(excludePropertyErrors: true) 
<fieldset> 
    <div class="form-element cf"> 
     <div class="form-label"> 
      <span>Approvers:</span> 
     </div> 
     <div class="form-input cf"> 
      @Html.TextBox("accountName", string.Empty, new { @class = "input-search-person" }) 
      @Ajax.ActionLink("Add", "AddRecipient", "Test", 
       new 
       { 
        accountName = "Value from Input here." 
       }, 
       new AjaxOptions 
       { 
        UpdateTargetId = "recipientList", 
        HttpMethod = "POST", 
        InsertionMode = InsertionMode.InsertAfter 
       }) 
      <div style="display: block; margin-top: 5px"> 
       <div id="recipientList"> 
       </div> 
      </div> 
     </div> 
    </div> 
</fieldset> 
<input type="submit" class="btn green rounded" id="Submit" name="Submit" value="Submit" /> 
}

這裏是我的TestController.cs：

public class TestController : Controller 
{ 
    public PartialViewResult AddRecipient(string accountName) 
    { 
     MyAccount acct = new MyAccount(); 
     acct.LastName = accountName; 
     acct.Email = "some email"; 
     return PartialView("_NewRow", acct); 
    } 

    [HttpGet] 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult Index(IEnumerable<string> accountList, string accountName) 
    { 
     if (Request.IsAjaxRequest()) 
     { 
      MyAccount acct = new MyAccount(); 
      acct.LastName = accountName; 
      acct.Email = "some email"; 
      return PartialView("_NewRow", accountName); 
     } 

     if (ModelState.IsValid) 
     { 
      RedirectToAction("AnotherAction", "AnotherController"); 
     } 

     return View(); 
    } 

}

這裏是我的局部視圖「_NewRow.cshtml」：

@model MyAccount 
@using (Html.BeginCollectionItem("recipients")) 
{ 
    @Html.HiddenFor(model => model.LastName) 
    @Html.HiddenFor(model => model.Email) 
<span>@Model.LastName<span>(@Model.Email)</span></span> 
}

這是我的簡單模式MyAccount.cs：

[Serializable] 
[DataContract] 
public class MyAccount 
{ 
    [DataMember] 
    public virtual string LastName { get; set; } 
    [DataMember] 
    public virtual string Email { get; set; } 
}

您的幫助將不勝感激。謝謝！

來源

2012-04-28 Cesar

實現這樣的一個簡單的方法可能是使用jQuery的AJAX方法，而不是jQuery的一點點改變你的操作鏈接到普通HTML按鈕

<button type="button" id="textButton">Add</button>

然後。如果您需要它們並且與您當前的代碼兼容，它們將提供更多的控制。讓我知道你是否想要這樣的示例代碼。 – 2012-04-28 04:16:38

也許這將有助於http://mazharkaunain.blogspot.com/2011/05/aspnet-mvc-razor-render-partial-view.html – maztt 2012-04-28 05:53:56

與你做

$('#textButton').click(function(){ 
    var recipName = $('.input-search-person').val(); 

    $.post('/Test/AddRecipient', 
      { accountName: recipName}, 
      function(data){ 
       $('#recipientList').append(data); 
      }); 

});

來源

2012-04-28 04:22:26

謝謝佈雷特！最後一個答案是正確的！ – Cesar 2012-04-28 17:28:49

ASP.NET MVC：從視圖傳遞數據到控制器（Ajax vs jQuery）

回答

相關問題