ASP.NET MVC - JSON响应向我发送文件而不是更新jqueryUI

时间:2013-04-01 11:30:01

标签: jquery ajax asp.net-mvc json asp.net-mvc-4

我正在返回一个json数据,我可以确认它正在将数据带回客户端。但它不是更新我的jqueryaccordion,而是要求我保存或打开文件。下面是我的脚本和控制器。我使用了jquery模式对话框通过部分视图编辑员工详细信息,点击更新按钮应该更新手风琴列表中的相应员工。非常感谢任何帮助 - 谢谢

更新

通过IE工具进行调试时,我注意到当点击“更新”按钮时,“请求”标签中的“发起人”显示“点击”。我猜这应该是'XMLHttpRequest'而是。希望这些信息有所帮助感谢

主视图

@Html.ActionLink("Edit Employee", "EditEmployees", "Home",
                        new { id = item.Id }
                        , new { @class = "editLink" })

使用编辑员工表单的部分视图 - 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>
}

操作返回包含editemployee表单的部分视图的结果

Public ActionResult EditEmployee(int id)
{
//DataAccess part
return PartialView("EditEmployee",employeedata);
}

更新员工详细信息后返回Json Result的控制器

[HttpPost]
Public JsonResult EditEmployee(Models.Employee employee)  
{  
       //Data access part

     JsonResult result = new JsonResult();
                            result.Data = employeeData;
                            return result;
}

主视图上的脚本

   <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");

        }

2 个答案:

答案 0 :(得分:1)

$.get(viewUrl, function (data) {

如果这是您获取ajax数据的方式,我可以说,此服务器代码返回错误:

JsonResult result = new JsonResult();
    result.Data = employeeData;
    return result;

因为默认情况下JsonResult只允许POST次请求

作为解决方案,您可以使用JsonRequestBehavior.AllowGet

答案 1 :(得分:1)

可能有点晚了但是......在我的视图中添加jquery不引人注目的引用修复了这个问题。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>