布局中的模型破坏了其他页面

2024-05-26

由于缺乏 MVC4 经验,我有一个设计缺陷。

问题是我的布局中有一个模型......

@model BasicFinanceUI.Models.LoginModel
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet"/>

    <title>@ViewBag.Title</title>
</head>

它出现在我的布局上的原因是登录按钮位于布局屏幕上,并且它会启动一个模式弹出窗口,其中包含使用该模型的朋友。

所以,在布局的底部,我有:

<div class="modal fade" id="login" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Login</h3>
                <div class="modal-body">
                    @using (Html.BeginForm("LoginUser", "User"))
                    {
                        <p>
                            @Html.LabelFor(x => x.Username)
                            @Html.TextBoxFor(x => x.Username)
                        </p>
                        <p>
                            @Html.LabelFor(x => x.Password)
                            @Html.PasswordFor(x => x.Password)
                        </p>
                        <p>
                            @Html.LabelFor(x => x.RememberMe)
                            @Html.CheckBoxFor(x => x.RememberMe)
                        </p>
                        <div class="modal-footer">
                            <input type="submit" value="Login" name="btn_login" class="btn btn-default" />
                            <a class="btn btn-primary" data-dismiss="modal">Cancel</a>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>

我的 /Home/Index 上还有一个登录和注销按钮,因此用户在默认页面上会看到两个登录按钮。一个在主页上,一个在标题/菜单中,这是共享的。

我认为布局页面上的模型(可能还有所有登录屏幕代码)可能是这里的问题。我应该如何实施这个?

我需要 Index.cshtml 页面(默认)上的登录按钮,以及顶部布局菜单中的按钮。两者都使用上面显示的模型弹出代码。


首先像您拥有的那样构建视图,但不使用助手,而是构建 html 字段。确保在我们可以用作选择器的字段上放置一个 id 或类

<input type="text" class="txtUserName" /> etc

然后确保页面上引用了 jquery 并将其放在屏幕底部

<script type="text/javascript">
    $(document).ready(function(){
        $('.btnSubmit').on('click', function(){
            $.ajax({
                url: "@(Url.Action("Action", "Controller")",
                type: "POST",
                contentType: "application/json",
                data: { UserName: $('.txtUserName').val(), Password: $('.txtPassword').val() }
                cache: false,
                async: true,
                success: function (result) {
                    alert('Login Successful!');
                    window.location = "@Url.Action("Index", "Controller")";
                }
            });
        });
    });
</script>

然后在你的控制器上你需要设置一个方法来接收ajax调用

[HttpPost]
public ActionResult Login(string UserName, string Password){
    //Check the user name and password against the database
    //from here http://stackoverflow.com/questions/10608198/asp-net-mvc3-returning-success-jsonresult
    var result=new { Success="True", Message="Success"};
    return Json(result, JsonRequestBehavior.AllowGet);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

布局中的模型破坏了其他页面 的相关文章

  • Ajax.ActionLink 和确认对话框

    我有一些问题 Ajax ActionLink 我想显示确认对话框 是的 我知道我可以这样做 Ajax ActionLink Do it Delete new AjaxOptions Confirm Are you sure 但我想要有自己的
  • Windows 8 RTM 上的 Visual Studio 2012 Web 发布无法启动浏览器

    我正在 Windows 8 RTM x64 上使用 Visual Studio 2012 Premium 开发 ASP NET MVC 4 网站 当我右键单击 Web 应用程序并选择 发布 时 Visual Studio 2012 返回消息
  • 将 div 元素放置在响应式背景上(Bootstrap 3)

    我想将 div 输入表单 放置在响应式背景上 我使用 Bootstrap 3 作为页面模板 但是 如果我调整窗口大小或使用其他屏幕尺寸 则元素位于另一个位置 我该如何解决这个常见问题 Example http goo gl D7TwIP h
  • MVC 对元素组强制进行 jQuery 验证

    我正在使用 MVC 4 设计的表单具有多个 DIVS 每个 DIVS 中有许多元素 我的目标是在用户填写字段时打开 关闭 DIVS 但是 我想对每个 DIV 而不是整个表单使用不显眼的验证 不单独检查每个元素是否可能 也许使用 DIV ID
  • GetAsync 请求返回空内容

    我想知道为什么当我在邮递员中尝试它有数据返回时它返回 null 这是我的代码 public async Task
  • 剃刀 2 到剃刀 3 MVC 5

    我一直在开发 MVC 4 解决方案 并且一直在尝试将其升级到 MVC 5 我已按照概述的步骤操作here http www asp net mvc tutorials mvc 5 how to upgrade an aspnet mvc 4
  • 取消滚动 Twitter 引导程序的词缀

    我在传统网站布局的侧边栏上使用 Twitter bootstrap 的后缀 页眉 内容和侧边栏 页脚 在某个滚动点上 我希望它从页面上取消固定并返回到其原始位置 静态 因此它不会与页脚重叠 我试图只用 CSS 来摆弄它 但是由于 affix
  • Bootstrap 字形未显示在表单中

    我正在尝试不同的方法来制作带有确认的表格 我有以下形式以及一个超链接 下面的超链接正确显示字形 但表单内的提交按钮仅在灰色按钮中显示为 提交 提交按钮和超链接的 CSS 是否需要不同 div class text center using
  • 如何使用 Bootstrap 选项卡?

    我试图了解如何做到这一点 http getbootstrap com javascript tabs http getbootstrap com javascript tabs 我认为文档不够详细 因为我无法理解它是如何工作的 div cl
  • Bootstrap 将图像与文本对齐

    我正在尝试使用引导程序将左侧的图像与文本对齐 并且当在移动设备上查看页面时 图像将居中于文本顶部 div class container div class row h1 About Me h1 div class col md 4 div
  • 模态内的引导程序表单未正确对齐

    我尝试使用引导程序 水平形式 制作模式形式 并且该字段显示在标签下 知道如何修复它 以便输入文本框位于标签的右侧而不是标签的下方吗 div class modal hide fade div class modal header div d
  • 在 Bootstrap 模式窗口中打开远程内容

    我所需要的只是一个简单的示例 说明如何将远程内容打开到 Twitter Bootstrap 模式窗口中 我正在使用 Bootstrap v2 0 4 但我无法让它工作 我可以打开常规模式窗口 但无法让它打开其中的远程文件 首先 远程数据必须
  • 找不到实体框架数据提供程序,entityclient

    首先 我发现许多问题和许多答案与我的问题相关或被认为与我的问题相同 但似乎没有什么对我有用 我有一个全新的模板化 MVC4 网站 全新安装的 sql server 2008 r2 中有一个全新的数据库 我在数据库上运行 aspnet reg
  • 动态创建表行后应用 Bootstrap“table-striped”

    我正在努力确保推特引导程序 http twitter github io bootstrap table strippedCSS 样式应用于其行在运行时动态添加的表 由于某种原因 我试图弄清楚这一点 我无法让这种特定的样式发挥作用 以便我的
  • 检查 Bootstrap Datepicker 脚本是否已加载

    我收到错误 Uncaught TypeError undefined is not a function 当我尝试设置日期选择器时 datepicker datepicker 如何确定日期选择器是否已加载 需要明确的是 我没有使用 jQue
  • 有没有更好的方法使用 MVC 4 和 Entity Framework 5 添加子记录?

    我正在学习 MVC 并结合实体框架处理其无状态性质 我的问题是 有没有更优雅的方式来处理下面的场景 我有两个 POCO 实体 public class Contest public long ID get set public IColle
  • 如何使用 ASP.NET MVC 在 Kendo UI Grid 中实现 N 级嵌套层次结构

    我正在尝试使用 ASP NET MVC 在 Kendo UI Grid 中实现 N 级嵌套层次结构 我可以实现特定数量的嵌套网格 但如何在 asp net MVC 中使用特定数据实现 N 级嵌套网格 Html Kendo Grid
  • 如何使用 Entity Framework Code First 在两个实体之间建立多个一对多关系

    下面是保存关系数据库记录的简单方法 该方法运行得很好 我对一种情况有疑问 在此之前 我需要知道如果数据库复杂性增加 我所采用的方法会遇到什么困难 还有更好 高效但简单的方法吗 一对一 tb student store student det
  • 如何将函数附加到弹出窗口关闭事件(Twitter Bootstrap)

    我做了一些搜索 但我只能认为我可以将事件附加到导致其关闭的按钮 https stackoverflow com questions 13205103 attach event handler to button in twitter boo
  • 网站的主体和元素固定在 980px 宽度上,不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width

随机推荐