jQuery UI对话框从其他页面重定向后不打开

本文关键字:重定向 UI 对话框 其他 jQuery | 更新日期: 2023-09-27 18:05:20

我正在一个MVC项目中工作,我正在从表中显示数据。并且我允许用户create, deleteedit的数据。

为了显示这些CRUD操作的表单,我使用jQuery UI dialog来弹出表单。在弹出窗口中,我使用partial view来显示各种控件

当我直接运行各自的页面并单击编辑链接它显示我弹出没有任何问题。例如,假设我有视图CurrentLocation在我的查找控制器;我设置了控制器

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

这是我的代码

CurrentLocation 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 Partial 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);
    }
}

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

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

我的代码是如何工作的,当用户点击编辑链接,它触发ShowPopUp() jQuery方法,它接受一个包含url的参数到EditLocation方法,该方法接受唯一ID作为参数。

你能告诉我为什么当我从其他页面重定向到这个页面时它不工作吗?

谢谢…

jQuery UI对话框从其他页面重定向后不打开

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

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

但是我建议您使用不引人注目的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
  }
});