ASP.NET MVC - JSON响应发送,而不是更新jQueryUI的我的文件 [英] ASP.NET MVC - JSON response sends me a file instead of updating the jqueryUI
问题描述
我返回JSON数据,我可以确认它带来的数据返回到客户端。而不是更新我的jqueryaccordion但是,它要求我保存或打开文件。下面是我的脚本和控制器。我已经使用jQuery的模态对话框,通过局部视图编辑员工的详细信息,并点击更新按钮应该更新了手风琴list.Any帮助各自的员工将大大AP preciated - 谢谢
更新
在通过IE的工具调试,我注意到,在点击更新按钮时,在要求选项卡显示点击的启动器。我猜测,这应该是XMLHtt prequest'代替。希望这些信息可以帮助。谢谢
主视图
@ Html.ActionLink(编辑员工,EditEmployees,家,
新{ID = item.Id}
,新{@class =editLink})
局部视图与编辑员工表 - EditEmployee.cshtml
@using(Ajax.BeginForm(EditEmployees,家,新AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod =POST
的onSuccess =updateSuccess
},{新@id =updateEmployeeForm}))
{
< DIV CLASS =编辑标记>
@ Html.LabelFor(型号=> model.Name)
< / DIV>
< DIV CLASS =主编场>
@ Html.TextAreaFor(型号=> model.Name)
@ Html.ValidationMessageFor(型号=> model.Name)
< / DIV>
< /字段集>
}
操作结果,返回包含editemployee形式的局部视图
公众的ActionResult EditEmployee(INT ID)
{
//数据访问部分
返回PartialView(EditEmployee,EmployeeData工作);
}
控制器,更新员工的详细信息后,返回JSON结果
[HttpPost]
公共JsonResult EditEmployee(Models.Employee员工)
{
//数据接入部分
JsonResult结果=新JsonResult();
result.Data = EmployeeData工作;
返回结果;
}
脚本的主视图
<脚本类型=文/ JavaScript的>
VAR linkObj;
$(函数(){
$(。editLink)按钮();
$('#updateDialog)。对话框({
的AutoOpen:假的,
宽度:400,
可调整大小:假的,
模式:真正的,
按钮:{
更新:函数(){
$(#更新消息)HTML('')。
$(#updateEmployeeForm)提交()。
},
取消:函数(){
$(本).dialog(亲密);
}
}
});
$(editLink)。点击(函数(){
//改变对话框的标题
linkObj = $(本);
VAR dialogDiv = $('#updateDialog');
变种viewUrl = linkObj.attr('的href');
$获得(viewUrl,功能(数据){
dialogDiv.html(数据);
变量$形式= $(#updateEmployeeForm);
//取消绑定现有的验证
$ form.unbind();
dialogDiv.dialog(开放);
});
返回false;
});
});
函数updateSuccess(数据){
//我想确保这一功能得到成功,而不是一个文件执行被送回我从服务器
$('#updateDialog)对话框(亲密)。
$('#commonMessage)HTML(更新完成);
$('#commonMessage')延迟(400).slideDown(400).delay(3000).slideUp(400);
警报(你好);
}
$。获得(viewUrl,功能(数据){
如果这是你如何让你的 AJAX
数据,我可以说,这台服务器code返回错误:
JsonResult结果=新JsonResult();
result.Data = EmployeeData工作;
返回结果;
因为默认情况下 JsonResult
只允许 POST
请求
作为解决方案,您可以使用 JsonRequestBehavior.AllowGet
I'm returning a json data, and I can confirm that it is bringing data back to client. but instead of updating my jqueryaccordion, it asks me to save or open the file. Below is my script and controller. I have used jquery modal dialog to edit the employee details through a partial view, and clicking on update button should update the respective employee in the accordion list.Any help would be greatly appreciated - thanks
Update
When debugging through IE tools, I noticed that when the 'update' button is clicked, the 'initiator' in the 'request' tab shows 'click'. I am guessing this should be 'XMLHttpRequest' Instead. Hope this information helps. Thanks
Main View
@Html.ActionLink("Edit Employee", "EditEmployees", "Home",
new { id = item.Id }
, new { @class = "editLink" })
Partial View with Edit Employee Form - EditEmployee.cshtml
@using (Ajax.BeginForm("EditEmployees", "Home", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "updateSuccess"
}, new { @id = "updateEmployeeForm" }))
{
<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.TextAreaFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
</fieldset>
}
Action Result that returns partial view containing the editemployee form
Public ActionResult EditEmployee(int id)
{
//DataAccess part
return PartialView("EditEmployee",employeedata);
}
Controller that returns Json Result after updating the employee details
[HttpPost]
Public JsonResult EditEmployee(Models.Employee employee)
{
//Data access part
JsonResult result = new JsonResult();
result.Data = employeeData;
return result;
}
Script on Main View
<script type="text/javascript">
var linkObj;
$(function () {
$(".editLink").button();
$('#updateDialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: {
"Update": function () {
$("#update-message").html('');
$("#updateEmployeeForm").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(".editLink").click(function () {
//change the title of the dialog
linkObj = $(this);
var dialogDiv = $('#updateDialog');
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
var $form = $("#updateEmployeeForm");
// Unbind existing validation
$form.unbind();
dialogDiv.dialog('open');
});
return false;
});
});
function updateSuccess(data) {
// I want to make sure that this function gets executed on Success instead of a file being sent back to me from the server
$('#updateDialog').dialog('close');
$('#commonMessage').html("Update Complete");
$('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
alert("hello");
}
$.get(viewUrl, function (data) {
If this is how you get your ajax
data, I can say, that this server code return error:
JsonResult result = new JsonResult();
result.Data = employeeData;
return result;
because by default JsonResult
allow only POST
requests
As solution you can use JsonRequestBehavior.AllowGet
这篇关于ASP.NET MVC - JSON响应发送,而不是更新jQueryUI的我的文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!