HTML <button> onclick 在 <form> 标签内不起作用答案

【问题标题】：HTML <button> onclick not working inside <form> tagHTML <button> onclick 在 <form> 标签内不起作用
【发布时间】：2017-08-31 15:23:34
【问题描述】：

我目前正在构建一个 ASP.NET MVC 应用程序，我想知道按钮 onclick 函数在表单标记内不起作用的原因可能是什么。我希望这个按钮是 type="button" 而不是 "submit"。此外，没有任何输入绑定到任何模型属性。这个应用程序的全部目的是作为我的客户的模型模板。按钮 onclick 操作正在调用我创建的控制器操作，除了返回视图之外什么都不做。我在其他视图上具有相同的设置，并且按钮按预期工作，但由于某种原因，这些按钮在单击时没有任何作用。我什至从我知道的其他视图中复制和粘贴代码，但仍然一无所获。不知道这里发生了什么。任何帮助将不胜感激。谢谢！下面是一些示例代码：

CSHTML：

<div class="row">
        <div class="col-sm-offset-1 col-sm-10 col-lg-offset-1 col-lg-10">
            <h3>WORK LOCATION INFO</h3>
            <hr />
            <form>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-3">
                            <label class="input-label" for="locationType">This is a:</label>
                            <select class="form-control" id="locationType">
                                <option></option>
                                <option>All location types</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-4">
                            <label class="input-label" for="campus">Campus <small><i style="color:red" class="fa fa-asterisk" aria-hidden="true"></i></small></label>
                            <select class="form-control" id="campus">
                                <option></option>
                                <option>All campuses</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="input-label" for="location">Location <small><i style="color:red" class="fa fa-asterisk" aria-hidden="true"></i></small></label>
                            <select class="form-control" id="location">
                                <option></option>
                                <option>All Locations</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-1">
                        <button type="button" class="btn btn-default button-blue" onclick="location.href='@Url.Action("WorkPosition", "RosterAdmin")'"><strong>GO BACK</strong></button>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-default button-green" onclick="location.href='@Url.Action("CreateProfile", "RosterAdmin")'"><strong>CONTINUE</strong></button>
                    </div>
                </div>
            </form>
        </div>
    </div>

控制器：

public class RosterAdminController : Controller
{
    // GET: RosterAdmin
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult WorkPosition()
    {
        return View();
    }

    public ActionResult WorkLocation()
    {
        return View();
    }

    public ActionResult CreateProfile()
    {
        return View();
    }

}

【问题讨论】：

你修改过asp.net mvc默认路由吗？
不，我已经单独留下了 RouteConfig。我对 MVC 还不够精明，还没有开始搞砸，哈哈
您的 URL 生成是否正确？如果你直接点击 URL 会发生什么？
我可以手动输入 URL 并正确导航到页面。如果我运行开发工具，按钮的链接也会显示正确的 URL。
你能发布渲染的按钮html吗？

标签： html asp.net asp.net-mvc razor

【解决方案1】：

似乎location 被设置为脚本中的其他位置。通常，使用window.location 来避免此类问题会更安全。如果您将按钮更改为使用 window.location.href，它可能会起作用。

如果您想在代码的其他地方避免这种情况，您可以尝试在浏览器中调试此问题以确定 location 的更改位置。

见：Is there any difference with using only location vs using window.location across browsers

【讨论】：