如何管理控制器或 mvc 实现？

Question

我正在尝试理解 mvc 模式。我正在用纯 Java Script + jQuery 开发单页应用程序。

假设我们有一个应用程序的“配置”，您可以在其中更改不同的方面。您可以看到多个选项卡（用户、安全等）。

目前我有：

• 用户模型
• 用户视图

• 用户控制器

• 安全模型

• 安全视图

• 安全控制器

• AdministrationViewModel（我结合了 UserModel 和 ColorModel）

• 管理控制器
• AdministrationView（提供“选项卡”并应在其上显示视图）

我不明白的是，如何在控制器之间进行更改？我在哪里更改它们？

让我们考虑这个流程：

1. 用户看到的是空的应用程序的基本结构
2. 用户点击导航栏上的“安全配置”
3. 用户现在应该可以看到“安全配置”（以及选项卡 |Security||User|）
4. 用户点击“用户”标签

5. 用户现在应该看到“用户配置”视图

   • 什么时候初始化控制器？
   • 谁负责选择合适的控制器？
   • 我如何在 AdministrationController 中为局部视图使用控制器？

编辑：正如我没有提到的那样：后台有一个 REST 服务。所以我对后端的调用只是 ajax-post/get-calls。

Answer 1

恕我直言，对于 SPA/PWA，您需要将 MVC 视为 mvC。 IOW 只需根据需要使用 ES6、CSS3、HTML5 调用您的控制器方法。不需要视图和模型。

还请注意，由于 no 需要 URL 路由，因此也不需要路由器逻辑/代码。 （除了您的 Global.asax 或任何与 .Net Core 相关的内容）

这是一种非常简单、强大且有效的方法！ JSON 输入 JSON 输出。

忘了提一下，大多数人选择 URL 的 /ControllerName/MethodName 约定，例如：-

Global.asax：-

public class MvcApplication : System.Web.HttpApplication
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
             );

 }

DataController 方法示例：-

    public JsonResult GetDetails(int custId)
    {
        Customer result = customers.Find(x => x.Id == custId);
        return Json(result, JsonRequestBehavior.AllowGet);
    }

示例 Javascript 调用：-

const CUST_DATA_URL = "http://localhost:49263/data/GetDetails";

function idSelect(elem, rowKey, rowData) {
    var xmlhttp = new XMLHttpRequest();
    var custArgs = "custId=" + rowKey;

    callAJAX(CUST_DATA_URL, "POST", function (xmlhttp) {
        if (xmlhttp.responseText.length == 0){
            alert("No such Customer");
            return;
        }
        crud.style.display = "block";
        logScroll.style.display = "none";
        resetSearch();

        var resp = JSON.parse(xmlhttp.responseText);
        detailId.value    = resp.Id;
        detailName.value  = resp.Name;
        detailEmail.value = resp.Email;

    }, custArgs);
}

function callAJAX(url, method, callback, serverArgs)
{
    var callback = callback;
    var xmlhttp = new XMLHttpRequest();
    var target = url;
    var args = (serverArgs != undefined) ? serverArgs : "";
    var postArgs = "";
    var callbackArgs = new Array();

    for (var i = 4; i < arguments.length; i++) {
        callbackArgs[i - 3] = arguments[i];
    }

    callbackArgs[0] = xmlhttp;

    if (method.toUpperCase() == "GET") {
        target = target + "?" + args;
    }

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                callback.apply(this, callbackArgs)
            } else {
                throw new Error("Error making Ajax call to " + target + " Status = " + xmlhttp.status);
            }
        }
    };

    xmlhttp.open(method, url, true);
    if (method.toUpperCase() == "POST") {
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        postArgs = args;
    }
    xmlhttp.send(postArgs);
}