ASP.NET MVC:将数据从视图传递到控制器(Ajax vs 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" />
}

这是我的测试控制器.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);
               });
});