在布局模型打破了其他页面 [英] Model in Layout breaks other pages
问题描述
我有一个设计缺陷的基础上我缺乏经验MVC4
I have a design flaw based on my lack of MVC4 experience.
问题是，我有一个模型，我的布局...
The issue is that I have a model in my Layout...
@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>
这是我的布局，原因是登录按钮布局屏幕上，并启动一个模式弹出，其中有使用该模型恶魔。
The reason it's on my Layout, is that the Login button is on the layout screen, and it launches a modal popup, which has fiends that use the model.
因此，在布局的底部，我有：
So, at the bottom of the layout, I have:
<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>
我也有默认的网页上我的/首页/索引的登录和注销按钮，让用户看到的两个登录按钮时。其中一个主要的页面上，一个在头/菜单，这是共享的。
I also have a Login and Logout button on my /Home/Index, so the user see's two login buttons when on the default page. One on the main page, and one in the header/menu, which is shared.
我认为有模型，大概所有的登录屏幕code，布局页，这里可能是问题。我应该如何实现呢？
I think having the model, and probably all the Login screen code, on the Layout page, might be the problem here. How should I be implementing this?
我需要的Index.cshtml页面（默认）登录按钮，在顶部的布局菜单按钮。并且都使用上面所示的模式弹出code。
I need the Login button on the Index.cshtml page (Default), and the button in the Layout's menu at the top. And both use the model popup code shown above.
推荐答案
首先构建视图就像你拥有了它，但使用的助手只是建立在html领域。确保你把一个ID或类上，我们可以作为一个选择
First build the view like you have it but instead of using helpers just build the html fields. Make sure you put an id or a class on the fields that we can use as a selector
<input type="text" class="txtUserName" /> etc
然后确保你的jQuery在页面上引用，并把这个在你的屏幕的底部
then make sure you have jquery referenced on the page and put this on the bottom of your screen
<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调用
then on your controller you need to have a method set up to receive the ajax call
[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);
}
这篇关于在布局模型打破了其他页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
