Question

<div id="myDiv">
    <ul class="purpose">
    @{ 
        var purpose = CommonMethod.getPurpose("");
        for(int i=0;i<10 && i<purpose.Count();i++)
        {
            <li><a href="#" >@purpose[i].Text</a></li>
        }
     }
    </ul>
</div>

从列表中选择上述单一目的时，它将在下面显示用于更新的ajax表单

@using (Ajax.BeginForm("UpdatePurpose", "Admin", new AjaxOptions { UpdateTargetId = "updateDiv" }))
{
    <div  class="profile">
    @Html.Hidden("PurposeID")
    <table>

        <tr>
             <td>Purpose</td>
             <td>:</td>
             <td> width="30%">@Html.TextBox("Description")</td>         
        </tr>
        <tr>
            <td>Admin Password</td>
            <td>:</td>
            <td>@Html.Password("Passwd1")</td>
        </tr>
    </table>
   <input type="submit"  value="submit" />
   </div>
}

以下Subting后面的操作被称为

[HttpPost]
public ActionResult UpdatePurpose(string PurposeID,string Description, string Passwd1)
{

    if (Request.IsAjaxRequest())
    {
        if (!Membership.ValidateUser(User.Identity.Name, Passwd1))
        {
            ModelState.AddModelError("", "Invalid Admin Password");
        }
        if (ModelState.IsValid)
        {
            var id = Convert.ToByte(PurposeID);
            var pur = db.Purposes.Where(p => p.PurposeID == id).SingleOrDefault();
            pur.Description = Description;

            db.SaveChanges();
            ViewBag.Result = "Data Updated Successfully.";
            return View();
        }
    }
    return View();
}

提交上面的ajax表单Updatepurpose如果管理员密码无效，我想显示验证消息错误，如果modelstate有效，我想加载myDiv内容，并向用户提供成功的更新消息

Answer 1

删除Ajax.BeginForm HTML帮助程序并执行一些手写的jQuery代码。您可以进行任何类型的自定义。

我会像你这样保留你的标记（删除了AjaxForm，使用了普通的表单声明，添加了一个css类名来提交按钮）

<div  class="profile">
<form>
@Html.Hidden("PurposeID")
<table>
    <tr>
         <td>Purpose</td>
         <td>:</td>
         <td> width="30%">@Html.TextBox("Description")</td>         
    </tr>
    <tr>
        <td>Admin Password</td>
        <td>:</td>
        <td>@Html.Password("Passwd1")</td>
    </tr>
</table>
<input type="submit" value="submit" class="btnSavePurpose" />

并添加一些像这样的JavaScript

<script type="text/javascript">
 $(function(){

    $(".btnSavePurpose").click(function(e){
       e.preventDefault();
       var item=$(this);
       $.post("@Url.Action("UpdatePurpose","Admin")", 
                         item.closest("form").serialize(), function(data){
           if(data.Status=="Success")
           {
             //Let's replace the form with messsage                
             item.closest(".profile").html("Updated Successfully");
           }    
           else
           {
              alert(data.ErrorMessage);
           }

       });   
    });   

 });

</script>

现在更新您的Action方法以返回JSON数据

[HttpPost]
public ActionResult UpdatePurpose(string PurposeID,string Description, string Passwd1)
{        
    if (Request.IsAjaxRequest())
    {
        if (!Membership.ValidateUser(User.Identity.Name, Passwd1))
        {
            return Json( new { Status="Error",
                               ErrorMessage="Invalid Admin Password"});
        }
        if (ModelState.IsValid)
        {
            var id = Convert.ToByte(PurposeID);
            var pur = db.Purposes.Where(p => p.PurposeID == id).SingleOrDefault();
            pur.Description = Description;

            db.SaveChanges();
            return Json( new { Status="Success"});
        }
    }
    return View();
}

它正在做的是，当用户点击具有该CSS类的按钮时，它将序列化容器表单并将其发送到Action方法。然后操作方法完成其工作，如果验证失败，它将以下面的格式将JSON发送回客户端

 { "Status": "Errorr", "ErrorMessage": "Invalid Admin Password"}

如果没问题，它会进行数据库更新，并以这种格式将JSON发送回客户端。

 { "Status": "Success"}

在out ajax(POST)函数的回调中，我们正在检查Status中JSON的值，并向用户显示相应的消息。

简单＆amp;干净:)）

在asp.net MVC3中提交ajax表单后更新div内容

1 个答案: