Question

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

比方说，我们为应用程序提供了一个“配置”，您可以在其中更改不同的方面。您可以看到多个标签（用户，安全性等）。

目前我有：

UserModel
UserView
UserController
SecurityModel
SecurityView
SecurityController
AdministrationViewModel（我将UserModel和ColorModel结合在一起）
AdministrationController
AdministrationView（提供“标签”并应在其上显示视图）

我不了解的是，如何在控制器之间进行切换？我在哪里更改它们？

让我们考虑一下这个流程：

用户看到应用程序的空的基本结构
用户单击导航栏上的“安全配置”
用户现在应该看到“安全配置”（和| Security || User |选项卡）
用户点击“用户”标签
用户现在应该可以看到“用户配置”视图
- 什么时候初始化控制器？
- 谁负责选择合适的控制器？
- 如何在AdministrationController中使用控制器用于局部视图？

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

Answer 1

IMHO，使用SPA / PWA，您需要将MVC视为mvC。 IOW只需要使用ES6，CSS3，HTML5来调用您的控制器方法。无需视图也无需模型。

请注意，由于不需要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);
}

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

1 个答案: