javascript - 从其他页面重定向后，jQuery UI 对话框无法打开

Question

我正在开发一个 MVC 项目，在该项目中显示表中的数据。 我允许用户创建、删除和编辑数据。

为了显示这些 CRUD 操作的表单，我使用 jQuery UI 对话框 来弹出表单。在该弹出窗口中，我使用部分 View 来显示各种控件

When I run respective page directly and click on Edit link it shows me pop up without any problem. For example suppose I have View CurrentLocation in my Lookups controller; I set the controller and action in RouteConfig.cs to Lookups and CurrentLocation and run it.

但我的问题是，当我重定向到页面时，假设在执行登录操作后，单击“编辑”后它不显示弹出。

这是我的代码

当前位置 View :

@model PITCRoster.RosterManagementEntities

@{
    ViewBag.Title = "CurrentLocation";
}

<script src="~/Content/PopUp.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<h2>CurrentLocation</h2>
@{
    Html.RenderPartial("_DisplayCurrentLocation", Model.tblCurrentLocations);
}

<div id="dialog">
@using (Html.BeginForm("AddLocation", "Lookups", FormMethod.Post))
{
    Html.RenderPartial("_AddLocation", new PITCRoster.tblCurrentLocation());
}
</div>

_DisplayCurrentLocation 部分 View

@model IEnumerable<PITCRoster.tblCurrentLocation>

<p>
    <a href="#" id="createNewLocationHref">Create New</a>
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.LocationId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Location)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.LocationId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Location)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            <a href="#"  onclick="ShowPopUp('Lookups/EditLocation/'+@item.LocationId)">Edit</a>
            @Html.ActionLink("Delete", "DeleteLocation", new { id = @item.LocationId }, new { onclick="return confirm('Are you sure you want to delete?')"})
        </td>
    </tr>
}
</table>

jQuery 函数:

function ShowPopUp(ActionName) {
    var url = ActionName;
    try {
        $.get(url, function (data) {

            $('#dialog').dialog({
                autoOpen: true,
                modal: true,
                bgiframe: true,
                width: 800,
                height: 250,
                open: function () {

                    document.getElementById('dialog').innerHTML = data;
                },
                close: function () {

                    document.getElementById('dialog').innerHTML = "";
                    document.getElementById('dialog').innerText = "";
                    $("#dialog").empty().dialog("destroy");
                }
            });
        })
    } catch (e) {
        alert(e.message);
    }

}

在弹出窗口中显示部分 View 的 ActionMethod

   public ActionResult EditLocation(string id)
        {
            int locationId = Convert.ToInt32(id);
           tblCurrentLocation tblCurrentLocation = unitOfWork.tblCurrentLocation.GetByID(locationId);
           return PartialView("_EditLocation", tblCurrentLocation);
        }

How my code works is when user clicks on Edit link it triggers ShowPopUp() jQuery method which accepts a parameter which contains url to EditLocation method which accepts unique ID as parameter.

您能帮我看看为什么当我从其他页面重定向到此页面时它不起作用吗？

谢谢...

Answer 1

<a href="#" onclick="ShowPopUp('Lookups/EditLocation/'+@item.LocationId)">Edit</a>可能会生成相对于页面的错误 url，它应该是 /Lookups/EditLocation/... (前导斜杠)。建议您始终使用Url.Action()生成 url 的帮助器以确保它们是正确的。在你的情况下，它将是

@Url.Action("EditLocation", "Lookups", new { id = item.LocationId })

但是我建议您使用 Unobtrusive Javascript而不是用行为污染你的标记。将您的 html 更改为

<a href="#" class="edit" data-url="@Url.Action("EditLocation", "Lookups", new { id = item.LocationId })">Edit</a>

那么脚本将是

$('.edit).click(function() {
  $.get($(this).data('url'), function (data) {
    ....
  });
});

或者(生成更少的标记)

<a href="#" class="edit" data-id="@item.LocationId })">Edit</a>

var url = '@Url.Action("EditLocation", "Lookups")';
$('.edit).click(function() {
  $.get(url, { id: $(this).data('id') }, function (data) {
    ....
  });
});

旁注:

@Html.ActionLink("Delete", "DeleteLocation", new { id = @item.LocationId }, new { onclick="return confirm('Are you sure you want to delete?')"})

正在进行 GET 调用，该调用不适合修改数据库中数据的方法。该url会添加到浏览器历史记录中，当然用户只需在浏览器中输入该地址即可调用它。最好的情况是，它会进行不必要的调用来删除不再存在的内容，最坏的情况可能会引发异常，具体取决于您的代码。而是使用表单来发布值

@using (Html.BeginForm("Delete", "DeleteLocation", new { ID = item.LocationId }))
{
  @Html.AntiForgeryToken()
  <input type="submit" value="Delete" /> // style it to look like a link if thats what you want
}

并使用 [HttpPost] 和 [ValidateAntiForgeryToken] 属性修饰该方法。

然后添加一个脚本来显示确认消息

$('form').submit(function() {
  if (!confirm("Are you sure want to delete record") { 
    return false; // cancel the submit if the user clicked the Cancel button
  }
});