无法通过JavaScript链接回MVC视图

Question

I have an Index View and when I click the Edit button, I post to the Edit View (via the Controller) and display a bootstrap modal popup.

By posting to the Edit View, the Controller/View automatically handle getting and displaying the correct data on the modal popup.

Once I'm on my Edit View with the dialog box appearing and I click on the Close button, I simply want to link back to the Index page again; but instead, am getting an error with the path of the url. The new path I want to link to is being " tacked on " to the original path instead of replacing it.

I'm using the Url.Action method inside the click event of the Close button (of which I verified it's hitting) and have verified the location.href url is exactly what is in the url variable as you see in the code.

What do I need to do to correctly link back to the Index url?

Index View

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

Edit Controller

// 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);
}

Edit View

@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 for Edit View

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

    return false;
});

Image of modal popup

Image of error

Answer 1

Assuming your javascript is in an external file you could do the following:

Attach the url to your button within your view with a data attribute as follows:

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

Then pull back the url with the data method as follows:

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

    return false;
});

Answer 2

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

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