无法 link 通过 javascript 返回 MVC 视图

Question

我有一个 Index 视图，当我单击 Edit 按钮时，我 post 到编辑查看（通过控制器）并显示 bootstrap 模式弹出窗口。

通过 post 编辑 Edit 视图，Controller/View 自动处理获取并在模式弹出窗口中显示正确的数据。

当我进入 Edit View 并出现对话框并单击 Close 按钮时，我只想link再次返回索引页面；但是，url 的路径出现错误。我想要link的新路径正在“附加”到原始路径而不是替换它。

我在关闭按钮的点击事件中使用了Url.Action方法（我验证了它是击中）并验证 location.href url 正是您在代码中看到的 url 变量中的内容。

我需要做什么才能正确 link 回到索引 url?

索引视图

<a href="@Url.Action("Edit", "Category", new { area="Categories", id = item.CategoryID })"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</a>

编辑控制器

// GET: Categories/Edit/5
public async Task<ActionResult> Edit(short id)
{
    if (id == 0)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }

    Category category = await db.GetCategoryIDAsync(id);

    if (category == null)
    {
        return HttpNotFound();
    }

    return View(category);
}

编辑视图

@model YeagerTechDB.Models.Category

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="modal" id="categoryEditModal" tabindex="-1" role="dialog" aria-labelledby="categoryModal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="categoryModal-label">Category Description</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="form-group">
                        @Html.LabelFor(model => model.CategoryDescription, new { @class = "control-label required col-offset-1 col-lg-3 col-md-3 col-sm-3 col-xs-3" })
                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                            @Html.EditorFor(model => model.CategoryDescription, new { @class = "form-control" } )
                            @Html.ValidationMessageFor(model => model.CategoryDescription, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-default" id="btnCloseCategory">Close</button>
                <button type="submit" class="btn btn-primary" id="btnSaveCategory">Save</button>
            </div>
        </div>
    </div>
</div>

<div>
    @Html.Hidden("categoryEditUrl", Url.Action("Edit", "Category", new { area = "Categories" }))
    @Html.Hidden("catID", Model.CategoryID)
</div>

@section Scripts {
    <script>
        $(document).ready(function ()
        {
            if (typeof contentEditCategory == "function")
                contentEditCategory()
        });
    </script>
}

用于编辑视图的 JS

$('#btnCloseCategory').click(function (e)
{
    var url = '@Url.Action("Index", "Category", new { area = "Categories" })';
    location.href = url;

    return false;
});

模式弹出窗口的图像

错误图片

Answer 1

尝试将关闭按钮的 type="submit" 更改为 type="button"。

<button type="button" class="btn btn-default" id="btnCloseCategory">Close</button>

Answer 2

假设您的 javascript 在外部文件中，您可以执行以下操作：

使用数据属性将 url 附加到视图中的按钮，如下所示：

<button type="submit" class="btn btn-default" id="btnCloseCategory" 
data-url="@Url.Action("Index", "Category", new { area = "Categories" })">Close</button>

然后用data方法拉回url如下：

$('#btnCloseCategory').click(function (e)
{
    var url = $(this).data('url');
    location.href = url;

    return false;
});

无法 link 通过 javascript 返回 MVC 视图

Cannot link back to MVC view via javascript

javascript

asp.net

asp.net-mvc

jquery

twitter-bootstrap