1 
<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 表单更新目的时，如果管理员密码无效，我想显示验证消息错误，并且如果模型状态有效，我想加载 myDiv 内容并向用户提供成功更新消息

4

1 回答 1

2

移除Ajax.BeginFormHTML Helper 并编写一些手写的 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)，我们正在检查Statusin 的值JSON并向用户显示适当的消息。

简单干净:)

于 2012-08-03T13:23:57.077 回答