ASP.NET MVC：将数据从视图传递到控制器（Ajax与jQuery）

Question

之前曾有人问过这个问题，但我所审查的问题都没有给出明确或完整的解决方案。 我希望你能在这里帮助我。
我想使用AjaxHelper从客户端（输入文本字段）输入的数据传递到服务器。 如果有更好的解决方案，请使用与我的示例相关的代码进行响应。
我也尝试过使用Ajax.BeginForm（）失败。 请记住，这里有两个按钮。 一种将用户输入的内容动态附加到输入字段下方的选项。 第二个按钮只是向控制器发送的简单非ajax帖子。
使用Ajax.ActionLink（）和局部视图“ _NewRow.cshtml”动态附加这些项以定义标记。

这是我的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; }
}

您的帮助将不胜感激。 谢谢！

Answer 1

将您的操作链接更改为常规的html按钮

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

然后用一点点jQuery完成

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

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

});

Answer 2

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

     $.post( 
          var data= @Script.Replace(( accountName ) => 
          Url.Action("AddRecipient", "Test", new {recipName })) ;
               function(data){
                     $('#recipientList').append(data);
               });
});