Angularjs无法在ASP.MVC 4 Razor View中运行，也无法将Angularjs中的值传递给@ Html.TextBoxFor [英] Angularjs cannot function in ASP.MVC 4 Razor View and not able to pass value from Angularjs to @Html.TextBoxFor

查看：53
本文介绍了Angularjs无法在ASP.MVC 4 Razor View中运行，也无法将Angularjs中的值传递给@ Html.TextBoxFor的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想显示google API的返回值。我正在使用Angularjs将值（国家/地区代码）传递给Google API，而Google API将返回我（国家/地区）。现在我只能在浏览器控制台中显示返回值而无法在
中显示 ASP.NET MVC4 Razor查看并传回我的控制器并保存到数据库中。

            
$
我是Angularjs的新手，任何人都可以帮我解决这个问题，因为我不确定我写的是否正确

    ;     

 

           

这是头



    @model FYP_1_0.Models.RegisterModel

    <！doctype html>

    < html>



    < head>

    < title>帮助中心< / title>

    < meta http-equiv =" content-type"含量=" text / html的;字符集= UTF-8英寸/>
$
    < link href =" http://fonts.googleapis COM / CSS家族=打开+三世+ 稠：300,300italic，700 "的rel ="样式表"
/>

    < script src =" http：//code.angularjs。 组织/ 1.2.0-rc.3 / angular.min.js "

I want to show the return value for the google API. I am using Angularjs to pass value (country code)to Google API and Google API will return me (country, state). Now i only able to show the return value in browser console and not able to display in ASP.NET MVC4 Razor view and also pass back to my controller and save into database.
            
I am newbie to Angularjs, can any body help me to resolve this problem, because i not sure that i am writing correctly or not
        
 
           
This is head

    @model FYP_1_0.Models.RegisterModel
    <!doctype html>
    <html >

    <head>
    <title>Help Center</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700" rel="stylesheet" />
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"

>< / script>

    < script src =" https://maps.google.com/ maps / api / js？sensor = true ">< / script>

    < / head>



这是正文

    

    < body>

    @using（Html.BeginForm（null，null，FormMethod.Post，new {enctype =" multipart / form-data"}）））
    {

    < div data-ng-app =" App">

    < form name =" myForm" data-ng-controller =" Ctrl">

    @ Html.AntiForgeryToken（）

    @ Html.ValidationSummary（）

    < div id =" main-wrapper">

    < div class =" container">

    < div class =" 12u">

    < div class =" left-box">

    < span>注册表< / span>

    < / div>

    < / DIV>  

                 

使用表格设计



    < table>

    < tbody>

    < tr>

    < td>

    < strong> @ Html.LabelFor（m => m.UserName）*< / strong>

    < / td>

    < td>

    @ Html.TextBoxFor（M => m.UserName，新的{data_ng_model = QUOT;用户名" ;,需要= QUOT;需"，@type = QUOT;电子邮件"}）

&NBSP;&NBSP ;&NBSP; < / td>

    < tr>

    < td>

    @ Html.LabelFor（m => m.Address.PostalCode）*

    < / td>

    < td>

    @ Html.TextBoxFor（M => m.Address.PostalCode，新的{data_ng_model = QUOT;邮编" ;,需要= QUOT;需" ;, ID = QUOT;拉链"}）

&NBSP; &NBSP;&NBSP; text = {{PostalCode}}< br />

    

    @ *< input type =" email"名称= QUOT;输入" data_ng_model = QUOT;文本"必需> * @@
    < / td>

    < td>

    < input type =" button"值= QUOT;注册码"的onclick = QUOT;的getLocation（）" />
$
    < / td>

    < tr>

    

    < td>

    @ Html.LabelFor（m => m.Address.StreetNumber）*

    < / td>

    < td>

    @ *< div data-ng-repeat =" 22"> txt = {{StreetNumber}}< / div> * @@
    @ Html.TextBoxFor（m => m.Address.StreetNumber，new {data_ng_model =" StreetNumber"，id =" StreetNumber"}））
    

    < / td>

    < tr>

    < td>

    @ Html.LabelFor（m => m.Address.Town）*

    < / td>

    < td>

    @ Html.TextBoxFor（m => m.Address.Town，new {data_ng_model =" Town"，id =" Town"}））
    < / td>

    < tr>

    < td>

    @ Html.LabelFor（m => m.Address.City）*

    < / td>

    < td>

    @ Html.TextBoxFor（m => m.Address.City，new {data_ng_model =" City"，id =" City"}））
    < / td>

    < tr>

    < td>

    @ Html.LabelFor（m => m.Address.Country）*
$
    < / td>

    < td>

    @ Html.TextBoxFor（m => m.Address.Country，new {data_ng_model =" Country"，id =" Country"}））
    < / td>

    < tr>

    < td>

    < p style =" color：red"> required *< / p>

    < div class =" 12u">

    < div class =" right-box">

    < input type =" submit"值= QUOT;注册" />
$
    < / div>

    < / div>

    < / td>

    < / tbody>

    < / table>



启动Javascript



   ;&NBSP; < script type =" text / javascript">

     angular.module（'App'，[]）;

     var addr = {};

                   &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;  

     function getLocation（）{

     getAddressInfoByZip（document。 forms [0] .zip.value）;

     }

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP ;&NBSP;  

     功能响应（obj）{

      console.log（obj）;

      }

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP ;&NBSP;  

   功能Ctrl（$ scope）{
$
    for（姓名在地址中）{

     if（name ==" city"）{

    $ scope.City = addr [name];

    } else if（name ==" country"）{

    $ scope.Country = addr [name];

    }
    

    function getAddressInfoByZip（zip）{

    if（zip.length> = 5&& typeof google！='undefined'）{

    var geocoder = new google.maps.Geocoder（）;

    geocoder.geocode（{'address'：zip +"马来西亚" +" MY"}}，功能（结果，状态）{

    if（status == google .maps.GeocoderStatus.OK）{
$
    if（results.length> = 1）{

    for（var ii = 0; ii< results [0] .address_components。 length; ii ++）{

    var street_number = route = street = city = state = zipcode = country = formatted_address ='';

    var types = results [0] .address_components [ ii] .types.join（"，"）;

    if（types ==" street_number"）{

    addr.street_number = results [0] .address_components [ ii] .long_name;

   }

    if（types ==" route" || types ==" point_of_interest， establishment"）{

    addr.route = results [0] .address_components [ ii] .lon g_name;

    }
   如果（类型==" sublocality，政治" ||类型=="局部性，政治" ||类型=="附近，政治" ||类型==" administrative_area_level_3，政治"）{

    addr.city =（city ==''|| types ==" locality，political"）？结果[0] .address_components [ ii] .long_name：city;

    }
    if（types ==" administrative_area_level_1， political"）{

    addr.state = results [0] .address_components [ ii] .short_name;

    }
    if（types ==" postal_code" || types ==" postal_code_prefix，postal_ code"）{

    addr.zipcode = results [0] .address_components [ ii] .long_name;

    }
    if（types ==" country，political"）{

    addr.country = results [0] .address_components [ ii] .long_name;

    }
    }
    addr.success = true;

    for（姓名在地址中）{
$
    console.log（'### google maps api ###'+ name +'：'+ addr [name]）;

    }
   回复（地址）;

    }其他{
$
   回复（{success：false}）;

    }
    }其他{
$
   回复（{success：false}）;

    }
    }）;
$
    }其他{
$
   回复（{success：false}）;

    }
    }
    < / script>

    

    < / div>

    < / div>

    < / form>

    < / div>

    }&NBSP;&NBSP;&NBSP;&NBSP;  

    < / body>

    < / HTML>&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;  
$


这是渲染脚本



   &NBSP; @section脚本{
$
    @ Scripts.Render（"〜/ bundles / jqueryval"）

    } b $ b 

我从浏览器控制台获取，但我想在我的视图中显示并传递给我的控制器和模型



    ### google maps api ### zipcode：18000注册：281

    ### google maps api ### city：Kuala Krai注册：281

    ### google maps api ### state：吉兰丹注册：281

    ### google maps api ### country：Malaysia注册：281

    ### google maps api ### success：true注册：281

   对象

    city："Kuala Krai"

   国家/地区："马来西亚"

   州："吉兰丹州"

   成功：真实
    zipcode："18000"

    __proto__：Object
></script>
    <script src="https://maps.google.com/maps/api/js?sensor=true"></script>
    </head>

This is body
    
    <body>
    @using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
    <div data-ng-app="App">
    <form name="myForm" data-ng-controller="Ctrl">
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()
    <div id="main-wrapper">
    <div class="container">
    <div class="12u">
    <div class="left-box">
    <span>Registration Form</span>
    </div>
    </div>  
                 
using table to design

    <table>
    <tbody>
    <tr>
    <td>
    <strong>@Html.LabelFor(m => m.UserName)*</strong>
    </td>
    <td>
    @Html.TextBoxFor(m => m.UserName, new { data_ng_model = "username", required = "required " , @type = "email" })
    </td>
    <tr>
    <td>
    @Html.LabelFor(m => m.Address.PostalCode)*
    </td>
    <td>
    @Html.TextBoxFor(m => m.Address.PostalCode, new { data_ng_model = "PostalCode", required = "required ", id="zip"})
    text = {{PostalCode}}<br/>
    
    @* <input type="email" name="input" data_ng_model="text" required>*@
    </td>
    <td>
    <input type="button" value="checkcode" onclick="getLocation()" />
    </td>
    <tr>
    
    <td>
    @Html.LabelFor(m => m.Address.StreetNumber)*
    </td>
    <td >
    @*<div data-ng-repeat="22"> txt= {{StreetNumber}}</div>*@
    @Html.TextBoxFor(m => m.Address.StreetNumber, new { data_ng_model = "StreetNumber", id="StreetNumber"})
    
    </td>
    <tr>
    <td>
    @Html.LabelFor(m => m.Address.Town)*
    </td>
    <td>
    @Html.TextBoxFor(m => m.Address.Town, new { data_ng_model = "Town", id="Town"})
    </td>
    <tr>
    <td>
    @Html.LabelFor(m => m.Address.City)*
    </td>
    <td>
    @Html.TextBoxFor(m => m.Address.City, new { data_ng_model = "City", id="City"})
    </td>
    <tr>
    <td>
    @Html.LabelFor(m => m.Address.Country)*
    </td>
    <td>
    @Html.TextBoxFor(m => m.Address.Country, new { data_ng_model = "Country", id="Country"})
    </td>
    <tr>
    <td>
    <p style="color:red">required*</p>
    <div class="12u">
    <div class="right-box">
    <input type="submit" value="Register" />
    </div>
    </div>
    </td>
    </tbody>
    </table>

Start of Javascript

    <script type="text/javascript">
     angular.module('App', []);
     var addr = {};
                          
     function getLocation() {
     getAddressInfoByZip(document.forms[0].zip.value);
     }
                        
      function response(obj) {
      console.log(obj);
      }
                        
    function Ctrl($scope) {
    for (name in addr) {
     if(name=="city"){
    $scope.City = addr[name];
    }else if(name=="country"){
    $scope.Country = addr[name];
    }}}
    
    function getAddressInfoByZip(zip) {
    if (zip.length >= 5 && typeof google != 'undefined') {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': zip + "马来西亚" + "MY" }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    if (results.length >= 1) {
    for (var ii = 0; ii < results[0].address_components.length; ii++) {
    var street_number = route = street = city = state = zipcode = country = formatted_address = '';
    var types = results[0].address_components[ii].types.join(",");
    if (types == "street_number") {
    addr.street_number = results[0].address_components[ii].long_name;
    }
    if (types == "route" || types == "point_of_interest,establishment") {
    addr.route = results[0].address_components[ii].long_name;
    }
    if (types == "sublocality,political" || types == "locality,political" || types == "neighborhood,political" || types == "administrative_area_level_3,political") {
    addr.city = (city == '' || types == "locality,political") ? results[0].address_components[ii].long_name : city;
    }
    if (types == "administrative_area_level_1,political") {
    addr.state = results[0].address_components[ii].short_name;
    }
    if (types == "postal_code" || types == "postal_code_prefix,postal_code") {
    addr.zipcode = results[0].address_components[ii].long_name;
    }
    if (types == "country,political") {
    addr.country = results[0].address_components[ii].long_name;
    }
    }
    addr.success = true;
    for (name in addr) {
    console.log('### google maps api ### ' + name + ': ' + addr[name]);
    }
    response(addr);
    } else {
    response({ success: false });
    }
    } else {
    response({ success: false });
    }
    });
    } else {
    response({ success: false });
    }
    }
    </script>
    
    </div>
    </div>
    </form>
    </div>
    }      
    </body>
    </html>                       

This is Render for Script

    @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    }
 
I get From Browser console, but i want this to show on my view and pass to my controller and model

    ### google maps api ### zipcode: 18000 Register:281
    ### google maps api ### city: Kuala Krai Register:281
    ### google maps api ### state: Kelantan Register:281
    ### google maps api ### country: Malaysia Register:281
    ### google maps api ### success: true Register:281
    Object
    city: "Kuala Krai"
    country: "Malaysia"
    state: "Kelantan"
    success: true
    zipcode: "18000"
    __proto__: Object

推荐答案

ASP.NET问题应该发布在ASP.NET论坛中：
http://forums.asp.net
ASP.NET questions should be posted in the ASP.NET forums: http://forums.asp.net


这篇关于Angularjs无法在ASP.MVC 4 Razor View中运行，也无法将Angularjs中的值传递给@ Html.TextBoxFor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆