Ajax调用的形式提交无需刷新页面MVC5

问题描述：

我需要从MVC视图wihtout清爽页面提交表单的一些帮助，但它appers我波纹管Ajax代码是不工作： //这里是Ajax调用Ajax调用的形式提交无需刷新页面MVC5

function AjaxCallAndShowMessage(btnClick) { 

$('form').submit(function() { 
     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: $(this).serialize(), 
      success: function (result) { 
       ShowTimeChangeMessage(); // show an alert message 
      } 
     }); 

    return false; 
});

}

//这里我不是为选定的项目，这是我喜欢从dropDownkist“时刻设定”，在控制器到达获取数据视图

<div id="dialog" title=""> 
    @using (Html.BeginForm("Administration", "Home", FormMethod.Post, new { enctype = "multipart/form-data"})) 
    { 
     @Html.DropDownList("SeTime", new List<SelectListItem> 
    { 
     new SelectListItem{ Text="1 Min", Value = "60" }, 
     new SelectListItem{ Text="2 Min", Value = "120" }, 
     new SelectListItem{ Text="3 Min", Value = "180" }, 
    }, "Select Time") 
     <input type="submit" value="Set Time " 
     onclick="AjaxCallAndShowMessage(this)" /> 
    } 
</div>

。对于这种观点，我可以得到一些帮助让Ajax调用适当吗？由于

你面临什么错误！ –

我没有获取所选项目的数据，我喜欢从dropDownkist“SetTime”获取控制器 – Zahir

我敢打赌，您需要附加到表单提交事件上。您可能会打两次电话，因为按钮的连接方式与您在提交的处理程序中的连接方式相同。在表单提交中，您可以调用您的ajax。 –

答

你的代码将生成名称SeTime一个SELECT元素。所以，当你提交表单（AJAX或正常表单提交），浏览器会发送所选选项值作为表单项目与关键SeTime值。它应该工作，假设你在http post操作方法中有一个同名的参数。

[HttpPost] 
public ActionResult Administration(string SeTime) 
{ 
// to do : Do something with SeTime 
// to do : Return something 
}

如果您使用的视图模型作为方法的参数，以确保它是设置表，使模型粘结剂将能够从提交的表单请求设置的值。

public class YourViewModel 
{ 
    public string SeTime {set;get;} 
    // other properties here 
}

此外，我看到一个与您的UI代码的小问题。根据您当前的代码，当用户点击提交按钮，它调用AjaxCallAndShowMessage JS功能，还增加了一个submit事件处理程序的形式。所以当用户第二次点击时，它再次注册事件处理程序到同一个表单。这意味着它现在会发出2个Ajax电话。当用户第三次点击时，它将再次注册事件处理程序，现在它将进行3个呼叫。这继续！

您只需注册一次即可。如果您从HTML标记的onclick和去onobutrusive JavaScript的方式，

<input type="submit" value="Set Time " />

并注册在文档准备事件提交事件处理程序，

$(function() { 

    $('form').submit(function() { 

     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: $(this).serialize(), 
      success: function(result) { 
       alert("Ajax call is done"); 
      } 
     }); 

     return false; 
    }); 
});

我需要设置表单ID而不是$（'form'） – Zahir

jQuery选择器$（'form'）'将返回页面中的所有表单元素。因此，如果您有多个表单，最好使用特定的选择器，如表单ID或其他表单属性。 – Shyju

感谢您的帮助，但它不在我的工作，我不知道为什么.. – Zahir

答

，而不是使用jQuery，AJAX提交表单使用@Ajax。BeginForm 它的工作原理相同的jquery ajax调用，它张贴的形式而无需刷新页面

<div id="dialog" title=""> 
@using (Ajax.BeginForm("Administration", "Home", new AjaxOptions 
       { 
        OnSuccess = "OnSuccess", 
        OnFailure = "OnFailure", 
        LoadingElementId = "progress" 
       })) 
    { 

     @Html.DropDownList("SeTime", new List<SelectListItem> 
     { 
     new SelectListItem{ Text="1 Min", Value = "60" }, 
     new SelectListItem{ Text="2 Min", Value = "120" }, 
     new SelectListItem{ Text="3 Min", Value = "180" }, 
     }, "Select Time") 
     <input type="submit" value="Set Time" /> 
     } 
    } 

</div>

答

[List item][1] [请在此输入链接的描述] [1]

Blockquote

强调文本

列表项

[1]：HTTP：// 强调文本

Ajax调用的形式提交无需刷新页面MVC5

相关推荐