ASP.NET MVC - JSON响应发送,而不是更新jQueryUI的我的文件 [英] ASP.NET MVC - JSON response sends me a file instead of updating the jqueryUI

查看:121
本文介绍了ASP.NET MVC - JSON响应发送,而不是更新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}))
    {
        < D​​IV CLASS =编辑标记>
            @ Html.LabelFor(型号=> model.Name)
        < / DIV>
        < D​​IV 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆