淘汰和 ASP.NET MVC多页

本文关键字:MVC 多页 NET ASP 淘汰 | 更新日期: 2023-09-27 18:36:06

我对淘汰赛很陌生,在应用我的绑定和多个视图时,我不知道如何使用 ASP.NET MVC 最好地构建淘汰赛。我了解如何在单页应用程序中做到这一点。但我的应用程序由多个服务器端控制器和多个视图组成。每个视图都可以有自己的挖空视图模型。

何时以及如何应用绑定?我最后加载了我所有的javascript,这意味着我无法内联调用我的视图模型。

使用某种 MasterViewModel,然后在我的视图中使用 with 绑定(这是我能想到的唯一解决方案)是否是一种好的做法?

淘汰和 ASP.NET MVC多页

是的,这是一个很好的做法,因为如果您尝试为多个视图创建单个视图模型,则一切看起来都很复杂并且会丢失可读性(完全取决于复杂性)。

你必须尝试这样的事情来使事情变得可读和简单

查看模型:

var MasterViewModel = {
    vm1 : new ViewModel1(),
    vm2 : new ViewModel2(),
    vm3 : new ViewModel3(),
    vm4 : new ViewModel4(),
}
ko.applyBindings(MasterViewModel);

另一种可能的方法,只需向ko.applybindings添加附加参数即可区分哪个视图属于哪个视图模型

例:

//view
<div id='viewmodel1'>
</div>
<div id='viewmodel2'>
</div>
var vm1 = function(){ //code}
var vm2 = function(){ //code}
ko.applyBindings(new vm1(), document.getElementById("viewmodel1"));
ko.applyBindings(new vm2(), document.getElementById("viewmodel2"));

如果我记得足够好,堆栈溢出中很少有类似的帖子,您可以参考

对于每个 ASP.NET 视图,您创建一个绑定到 mvc 视图的 ViewModel。我会以 ASP.NET MVC模型命名ViewModel。

ASP.NET MVC 模型:

public class LoginViewModel
{
    [Required]
    [Display(Name = "Email")]
    [EmailAddress]
    public string Email { get; set; }
    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }
    [Display(Name = "Remember me?")]
    public bool RememberMe { get; set; }
}

挖空视图模型:

var LoginViewModel = function () {
    var self = this;
    self.email = ko.observable();
    self.password = ko.observable();
    self.rememberMe = ko.observable();
    self.login = function () {
        ...
    }
};

我通常使用 ASP.NET 捆绑捆绑.js所有视图模型,然后在每个MVC视图中绑定挖空视图模型。

$(function() {
    ko.applyBindings(new LoginViewModel());
});

如果您需要在第一次加载时从 mvc 模型填充模型,我会使用 json.net 序列化为 json,然后将其传递给 ViewModel 承包商:

var loginModel = '@JsonConvert.SerializeObject(Model)';
$(function() {
    ko.applyBindings(new LoginViewModel(loginModel));
});

然后在挖空 ViewModel 中,您可以填充传递到承包商的模型中的可观察量:

var LoginViewModel = function (loginModel) {
    var self = this;
    self.email = ko.observable(loginModel.email);
    self.password = ko.observable(loginModel.password);
    self.rememberMe = ko.observable(loginModel.rememberMe);

为了将驼峰大小写用于 json,我将 json.net 更改为序列化为驼背壳。

如果您有一个类似于 SPA 的复杂页面,例如具有多个步骤的表单页面,本质上是具有多个视图状态的页面,您将使用一些 MasterViewModel,如 super cool 所解释的那样。