使用 Ajax.BeginForm 更新表单答案

【问题标题】：Update a form using Ajax.BeginForm使用 Ajax.BeginForm 更新表单
【发布时间】：2015-11-13 07:29:42
【问题描述】：

我正在尝试使用 Ajax.BeginForm 更新我的应用程序中的表单。更新正在发生，但在控制器中执行该函数后，它会重定向到具有控制器函数名称的视图。我不希望它重定向到另一个视图，而是希望显示成功或失败等警报消息。

<div id="target" ondrop="drop(event)" ondragover="allowDrop(event)">
   @using (Ajax.BeginForm("Insert", "User", new AjaxOptions{
       HttpMethod = "POST",
       UpdateTargetId = "target",
       OnSuccess = "success"
   }))
   {
       <ul>
       @foreach (var item2 in Model.sample)
       {
           <li draggable="true" ondragstart="drag(event)" class="Contentpropclass" value="@item2.name">
               <input type="hidden" id="ID" name="ID" value="@item2.id"/>
               <input type="hidden" value="@item2.name" name="Name" id="Name"/>
               @item2.name
               <input type="number" name="age"  value="@item2.age" placeholder="age"  />
               <input type="number" name="siblings" value="@item2.siblings" placeholder="" /> 
           </li>     
       }
       </ul>
       <br /> <br /> <br />
       <br /> <br /> <br />
       <br /> <br /> <br />

       <button type="submit" value="submit">Save</button>
    }
</div>

【问题讨论】：

你能显示控制器动作吗？
您是否在视图中包含了不显眼的 ajax javascript 文件？听起来它正在对您的控制器进行同步调用，而不是进行 ajax 调用。这大部分时间都是由于 javascript 错误而发生的。
现在显示成功和失败消息。问题是保存后，ajax 重新加载表单部分并创建一个框，其中将列出所有名称，然后是带有年龄和兄弟姐妹框的普通 li 名称.甚至该 div 的大小也减小了。我想删除多余的 li 并禁用大小更改。我只想要成功或失败消息。

标签： javascript jquery ajax asp.net-mvc razor

【解决方案1】：

您需要从控制器返回 JSON。

public ActionResult Controller1(String postdata1, object postdata2)
        {
            Boolean result = GetResultMethot(); 
            var jsonResult = Json(result, JsonRequestBehavior.AllowGet);
            return jsonResult;
        }

cshtml

   @using (Ajax.BeginForm("Insert", "User", new AjaxOptions{
           HttpMethod = "POST",
           UpdateTargetId = "target",
           OnSuccess = "AjaxResponse(data)"
       }))

JavaScript

function AjaxResponse(json) {
    if(json != null && json.length > 0 && json == "true")
    {
       alert("true");
    }
    else
    {
       alert("false");
    }   
}

【讨论】：