个人中心
gpt4 book ai didi

c# - 提交表单时不调用 Controller 函数

转载 作者：行者123 更新时间：2023-11-30 16:57:25 25 4
gpt4 key购买 nike

当点击提交按钮时，没有调用 auth 函数，我一直无法弄清楚原因。

所有页面模板的html:

<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyApp @ViewBag.Title</title>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/js/Login.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("myApp", "Index", "Home", null, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
            </ul>
        </div>
    </div>
</div>

<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - myApp</p>
    </footer>
</div>


</body>
</html>

此页面 View 的 html:

@{
    ViewBag.Title = "Login";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2></h2>
<div id="loginBox">
  <auth-modal></auth-modal>
</div>

这是自定义指令的 html:

<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
            <form class="form-signin" name="authForm" ng-submit="auth()" ng-controller ="AuthController" novalidate>
                <input type="text" class="form-control" placeholder="user name" ng-model ="AuthController.user.username" required autofocus>
                <input type="password" class="form-control" placeholder="password" ng-model ="AuthController.user.password" required>
                <input type="submit" class="btn btn-primary" value="Submit" />
            </form>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

这是JS:

(function () {
var MyApp = angular.module('MyApp', []);

MyApp.controller('AuthModalController', function () {
    MyApp.user = {};
    console.log("AuthModalController ran");
    $(".modal").modal({});
});

MyApp.directive("authModal", function () {
    return { restrict: 'E', templateUrl: '\\js\\templates\\auth-modal.html', controller: 'AuthModalController',controllerAs: 'authmodalCtrl'}
});

MyApp.controller('AuthController',function () {
    this.user = {};
    console.log("AuthController ran");
    this.auth = function () {
        console.log("user " + this.user);

    };
});
})();

MVC 5 Controller :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyApp.Controllers
{
    public class MyAppController : Controller
   {
       //
       // GET: /MyApp/
       public ActionResult Index()
       {
          return View();
       }
    }
}

最佳答案

编辑:我在这里补充说，我无法让下面链接的代码运行，除非在表单对象上的 Controller 声明旁边添加 ng-app="app-name-from-module"指令，这不在链接的 angular-js 文档中!

仅阅读文档我注意到了很多问题，

1) 您正在声明“myApp”并使用“MyApp”，除非那是混淆错误。

2) 我认为您的 Controller 根据文档遗漏了一些内容(尤其是 $scope 变量，https://docs.angularjs.org/guide/controller)

2a) 您没有将 auth 函数附加到 $scope

3) .controller 似乎接受字符串和数组作为参数，而不是通用函数。

每:https://docs.angularjs.org/api/ng/directive/ngSubmit 

<script>
  angular.module('submitExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.list = [];
      $scope.text = 'hello';
      $scope.submit = function() {
        if ($scope.text) {
          $scope.list.push(this.text);
          $scope.text = '';
        }
      };
    }]);
</script>
<form ng-app="submitExample" ng-submit="submit()" ng-controller="ExampleController">
  Enter text and hit enter:
  <input type="text" ng-model="text" name="text" />
  <input type="submit" id="submit" value="Submit" />
  <pre>list={{list}}</pre>
</form>

关于c# - 提交表单时不调用 Controller 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26575976/

25 4 0
文章推荐： c# - 无法在 ASP.NET Webforms 中运行异步任务
文章推荐： c - 程序在ID号调用时循环，并且没有在数组中输入信息
文章推荐： 从 C 程序调用 Windows 10 bash
文章推荐： c# - Microsoft.Security.Application.Encoder.UrlPathEncode 有什么作用？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com