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; }
}
您的帮助将不胜感激。 谢谢!
答
与你做
$('#textButton').click(function(){
var recipName = $('.input-search-person').val();
$.post('/Test/AddRecipient',
{ accountName: recipName},
function(data){
$('#recipientList').append(data);
});
});
+0
谢谢布雷特!最后一个答案是正确的! – Cesar 2012-04-28 17:28:49
实现这样的一个简单的方法可能是使用jQuery的AJAX方法,而不是jQuery的一点点改变你的操作链接到普通HTML按钮
然后。如果您需要它们并且与您当前的代码兼容,它们将提供更多的控制。让我知道你是否想要这样的示例代码。 – 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