个人中心
gpt4 book ai didi

javascript - 如何在 MVC 中有自己的 Controller 的索引中创建工作模态弹出寄存器？

转载 作者：行者123 更新时间：2023-12-03 11:34:11 24 4
gpt4 key购买 nike

我想做的是，当我在索引页面时，如果单击“注册”按钮，那么它将显示注册页面表单的模式弹出对话框。

“Index.cshtml”位于“Home” View 中，它有自己的 Controller (HomeController.cs)和“Register.cshtml”(当我们单击“Index”中的注册按钮时，我们需要将其带入模态弹出窗口') 位于“帐户” View 中，其中有“AccountController.cs”来控制寄存器部分。

首先，我们尝试在索引中创建 javascript，当我单击注册按钮时，它将创建一个对话框，其中包含带有注册 View 页面 url 的内容(通过 .load())。

但是，当我们填写表单并单击注册表中的提交按钮时，如果注册成功，则可以(因为在 Controller 中会重定向到索引页面)，但如果失败， Controller 会做什么添加一些验证摘要，说明为什么失败并返回部分 View ，这使得重定向到注册页面。这意味着它将去注册寻呼机而不是对话框更改。

我知道为什么会发生这种情况，因为寄存器表单与寄存器 Controller 连接。

所以我在这里所做的是，我将注册 View 设置为共享文件夹中的部分 View 。

因此我可以更轻松地将其添加到 Index.cshtml 中。 (此外，我将制作对话框从自定义 javascript 更改为使用 Bootstrap 中的模态类。)

这是我的_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    <link href="~/Content/jquery-ui.css" rel="stylesheet" />
    @Scripts.Render("~/bundles/jquery")
    <script src="~/Scripts/jquery-ui.js"></script>
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse">
        <!--navbar-fixed-top not spanning rest of contents, change body margin in site.css to use-->
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("GT BookSwap", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Sell Textbooks", "SellingPage", "SearchList")</li>
                    <li>@Html.ActionLink("Buy Textbooks", "BuyingPage", "SearchList")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div>
        @RenderBody()
    </div>

    <div class="container body-content">
        <hr/>
        <footer>
            <p>&copy; @DateTime.Now.Year - GT Senior Design Group</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

这是我的_LoginPartial.cshtml

@using Microsoft.AspNet.Identity

@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
{
    @Html.AntiForgeryToken()

    <ul class="nav navbar-nav navbar-right">
        <li>
            @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage" })
        </li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#" data-toggle="modal" data-target="#myModal">Register</a></li>
        <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

这是我的 Index.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Home Page";
}
<div class="mainheader">
    <div class="container">
        <h1>GT BookSwap Page</h1>
        <p>Sign up for BongBong to sell your textbooks!</p>
        <p>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" , @class = "btn btn-primary", data_toggle="modal", data_target="basicModal"})</p>
    </div>
</div>

<div class="bluecontainer">
    <div align="center">
        <div class="container">
            <h1>Search by Keyword</h1>
            <form class="navbar-form" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" size=80 placeholder="Search by title, author or ISBN">
                </div>
                <button type="submit" class="btn btn-primary btn-large" style="width:100px; height:55px;">Search</button>
            </form>
        </div>
    </div>
</div>

<div class="yellowcontainer">
    <div align="center">
        <div class="container">
            <h1>Search by Course</h1>
            <form class="navbar-form" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" size=80 placeholder ="Search by title, author or ISBN">
                </div>
                <button type="submit" class="btn btn-warning" style="width:100px; height:55px;">Search</button>
            </form>
        </div>
    </div>
</div>

@{Html.RenderPartial("_Register");}

这是我的_Register.cshtml(这是共享文件夹中的部分 View )

@model GTBookSwap.Models.RegisterViewModel

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="registerLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="registerLabel">Register</h4>
            </div>
            <div class="modal-body" id="Content">
                <div class="container" id="regi">
                    @Html.AntiForgeryToken()
                    <h4>Create a new account.</h4>
                    <hr />
                    @Html.ValidationSummary()
                    <div class="form-group">
                        @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
                        <div class="col-md-10">
                            @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
                        <div class="col-md-10">
                            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
                        <div class="col-md-10">
                            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" id="Register" class="btn btn-default" value="Register" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script type="text/javascript">
    var RegisterURL = {
        RegisterUrl: '@Url.Action("Register", "Account")'
    };

    $("#Register").click(function (e) {
        var form = $(this);
        //var model = @Html.Raw(Json.Encode(Model));
        $.ajax({
            url: RegisterURL.RegisterUrl, (????????)
            type: 'POST',
            cache: 'false', (?????????)
            data: form.serialize(), (????????)
            //dataType: "html",
            sucess: function (result) {
               (???????)
            },
            error: function (result) {
                 (?????????)
                alert("Fail");
                //$("#Content").text("qweqwe");
                $("#Content").html(result);
                //$('#Content').load('/Shared/_Register');
            }
        })
    })
    var repeatUrl = '@Url.Action("Register","Account")';
    var previewContainer = $('#myModel #Content');
</script>

这是 AccountController 中我的 Register() 

// POST: /Account/Register
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Register(RegisterViewModel model)
{

    if (ModelState.IsValid)
    {
        var user = new ApplicationUser() { UserName = model.UserName };
        var result = await UserManager.CreateAsync(user, model.Password);
        if (result.Succeeded)
        {
            await SignInAsync(user, isPersistent: false);
            return RedirectToAction("Index", "Home");
        }
        else
        {
            //return RedirectToAction("Index", "Home");
            AddErrors(result);
        }
    }

    // If we got this far, something failed, redisplay form
    //return Redirect(Request.Url.ToString());
    //return Json(model);
    //return PartialView("_Register",model);
    return PartialView(model);
    //return View(model);
}

从 _Register.cshtml 中的 javascript 中，我不知道要在 URL 和其他内容中放入什么内容。(特别是在 ?????? 部分)

另外，对于发送错误以在 _Register.cshtml 中的 javascript 代码中显示的 Controller ，我必须更改什么？因此，如果 js 得到结果，则决定是否发送到索引或保留此模型弹出注册表单，因为它失败了。

我想做的是在索引中打开注册的模式弹出窗口，即使它失败与否，也不要刷新以将站点移动到注册页面，只需停留在弹出窗口上并仅更改内容。请!!谢谢。

最佳答案

这是我关于您的问题的一些代码，尝试做同样的事情，所以如果您可以根据您的要求修改它，您应该已经找到解决方案。

@model RegisterViewModel

input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error {
    background: #FEF1EC;
    border: 1px solid #CD0A0A;
}

.validation-summary-errors ul li:nth-child(-n+4) {
    display: none;
}

.validation-summary-valid {
    display: none;
}

.validation-summary-errors {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #b94a48;
    background-color: #FEF1EC;
    border-color: #FEF1EC;
    display: inline-block;
    width: 100%;
    height: 30px;
    font-size: .9em;
    padding: 7px;
}

.field-validation-error {
    display: none;
}
</style>

@using (Ajax.BeginForm("Register", "Account", new AjaxOptions { HttpMethod = "Post"}))
{
  @Html.AntiForgeryToken()

  //Removed code for simplicity

  <br />
  @Html.ValidationSummary(false, "The highlighted fields are required!")
  <br />

<p>
    <input class="btn btn-lg btn-success btn-block" type="submit" value="Sign Up" />
</p>
}

关于javascript - 如何在 MVC 中有自己的 Controller 的索引中创建工作模态弹出寄存器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26599853/

24 4 0
文章推荐： javascript - Angularjs 中的 localStorage 在选项卡之间共享
文章推荐： rust - Rust生命周期子类型不适用于Cell
文章推荐： rust - 为什么 `std::i64::MIN..=-1i64`和 `1i64..=std::i64::MAX`没有包含在我的模式中？
文章推荐： javascript - 如何集成jquery.fileupload-rails？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com