Question

我正在研究一个MVC项目，我在该项目中显示来自表格的数据。我允许用户使用create，delete和edit数据。

要显示这些CRUD操作的表单，请使用 jQuery UI对话框弹出表单。在弹出窗口中，我使用partial view来显示各种控件

当我直接运行相应页面并点击修改链接时让我看到弹出没有任何问题。例如，假设我有View 我的Lookups控制器中的CurrentLocation;我设置了控制器和在RouteConfig.cs中对Lookups和CurrentLocation进行操作并运行它。

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

这是我的代码

CurrentLocation视图：

@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局部视图

@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的参数 to EditLocation方法，接受唯一ID作为参数。

当我从不同页面重定向到此页面时，能否帮助我解释为什么它不起作用？

谢谢...

Answer 1

<a href="#" onclick="ShowPopUp('Lookups/EditLocation/'+@item.LocationId)">Edit</a>可能会生成相对于页面的错误网址，它应该是/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
  }
});

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

1 个答案: