在ASP.NET MVC2的意见和部分形式的奇怪行为

问题描述:

我在ASP.NET MVC 2实施MS NerdDinner应用程序,我使用谷歌地图,而不是MS地图。我使用谷歌网站的地图样本代码。我在同一个目录下有两个非常简单的视图,Create.aspx和Edit.aspx,它们分别创建和编辑晚餐。它们非常简单 - 它们都呈现一个名为Dinner.ascx的局部视图,该视图也位于同一个目录中。在ASP.NET MVC2的意见和部分形式的奇怪行为

Dinner表单包含3个js文件,并且还呈现另一个显示google地图的部分表单。我有2个问题:

  1. 从编辑视图中呈现时没有找到的JavaScript文件,并完全翻倒,而当它从创建视图称为是看到JavaScript文件和工作晚餐形式在一定程度上。创建的网址为http://localhost/NerdDinner/Dinners/Create,编辑为http://localhost/NerdDinner/Dinners/Edit/39。为什么从编辑视图中找不到JS文件,即使两个视图都呈现相同的局部视图?

  2. 在Firefox(版本3.6.8)中,“创建”页面有时会起作用,它非常不一致。通常在刷新几次或离开并返回页面后,它最终会工作,而在IE 8中它始终工作。为什么FF不一致?

将溶液的目录结构是:

的NerdDinner(根)
控制器
- HomeController.cs
- DinnersController.cs
- 等
模型
脚本
- CurrentJS .js
- MainJS.js
- jQuery的1.4.1.js
- 等
查看
- 帐户
- 晚餐
- - Create.aspx
- - Edit.aspx
- - DinnerForm.ascx
- - GoogleMap2.ascx
- - 等
- 首页
- 共享

我一直b用这种方法将我的头靠在墙上玩了两天,再也看不到树木了。下面的代码(道歉,如果这是一个有点冗长):

Create.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<NerdDinner.Controllers.DinnerFormViewModel>" %> 
<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server"> 
    Host a Dinner 
</asp:Content> 
<asp:Content ID="Create" ContentPlaceHolderID="MainContent" runat="server"> 
    <h2>Host a Dinner</h2> 
    <% Html.RenderPartial("DinnerForm"); %> 
</asp:Content> 

Edit.aspx:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<NerdDinner.Controllers.DinnerFormViewModel>" %> 
<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server"> 
    Edit: 
    <%=Html.Encode(Model.Dinner.Title) %> 
</asp:Content> 
<asp:Content ID="Edit" ContentPlaceHolderID="MainContent" runat="server"> 
    <h2> 
     Edit Dinner</h2> 
    <% Html.RenderPartial("DinnerForm"); %> 
</asp:Content> 

DinnerForm.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<NerdDinner.Controllers.DinnerFormViewModel>" %> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="../Scripts/MainJS.js"></script> 
<script type="text/javascript" src="../Scripts/CurrentJS.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#Address").blur(function(evt) { 
      $("#Latitude").val(""); 
      $("#Longitude").val(""); 

      var address = jQuery.trim($("#Address").val()); 

      alert('address: ' + address); 

      if (address.length < 1) 
       return; 

      codeAddress(); 
     }); 
    }); 
</script> 

<%= Html.ValidationSummary("Please correct your errors and try again.") %> 
<% using (Html.BeginForm()) { %> 
<fieldset> 
    <p> 
     <label for="Title"> 
      Dinner Title:</label> 
     <%= Html.TextBox("Title", Model.Dinner.Title) %> 
     <%=Html.ValidationMessage("Title", "*") %> 
    </p> 
    <p> 
     <label for="EventDate"> 
      Event Date:</label> 
     <%= Html.TextBox("EventDate", Model.Dinner.EventDate) %> 
     <%= Html.ValidationMessage("EventDate", "*") %> 
    </p> 
    <p> 
     <label for="Description"> 
      Description:</label> 
     <%= Html.TextArea("Description", Model.Dinner.Description) %> 
     <%= Html.ValidationMessage("Description", "*") %> 
    </p> 
    <p> 
     <label for="Address"> 
      Address:</label> 
     <%= Html.TextBox("Address", Model.Dinner.Address) %> 
     <%= Html.ValidationMessage("Address", "*") %> 
    </p> 
    <p> 
     <label for="Country"> 
      Country:</label> 
     <%= Html.DropDownList("Country", Model.Countries) %> 
     <%= Html.ValidationMessage("Country", "*") %> 
    </p> 
    <p> 
     <label for="ContactPhone"> 
      Contact Phone #:</label> 
     <%= Html.TextBox("ContactPhone", Model.Dinner.ContactPhone) %> 
     <%= Html.ValidationMessage("ContactPhone", "*") %> 
    </p> 
    <p> 
     <%= Html.Hidden("Latitude", Model.Dinner.Latitude) %> 
    </p> 
    <p> 
     <%= Html.Hidden("Longitude", Model.Dinner.Longitude) %> 
    </p> 
    <p> 
     <input type="submit" value="Save" /> 
    </p> 
</fieldset> 
<div id="mapDiv"> 
    <%Html.RenderPartial("GoogleMap2", Model.Dinner); %> 
</div> 
<% } %> 

GoogleMap2。ASCX:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>  
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 50% } 
    #infoPanel { 
    float: left; 
    margin-left: 10px; 
    } 
    #infoPanel div { 
    margin-bottom: 5px; 
    } 
</style> 
<!-- End add for google map --> 

<div id="map_canvas" style="width: 765px; height: 400px;"> 
</div> 

<div id="infoPanel"> 
    <b>Marker status:</b> 
    <div id="markerStatus"> 
     <i>Click and drag the marker.</i></div> 
    <b>Current position:</b> 
    <div id="info"></div> 
    <b>Closest matching address:</b> 
    <div id="address"></div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     initialize4(); 
    }); 
</script> 

CurrentJS.js:

//// +++++++++++ Start of attempt to pinpoint location automatically 

function initialize4() { 
    var myOptions = { 
     zoom: 9, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    // Try W3C Geolocation (Preferred)  
    if (navigator.geolocation) { 
     browserSupportFlag = true; 
     navigator.geolocation.getCurrentPosition(function(position) { 
      initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
      map.setCenter(initialLocation); 
     }, function() { 
      handleNoGeolocation(browserSupportFlag); 
     }); 
     // Browser doesn't support Geolocation 
    } else { 
     browserSupportFlag = false; 
     handleNoGeolocation(browserSupportFlag); 
    } 

    if (initialLocation == 'undefined') 
     alert('1' + initialLocation); 
    else 
     alert('2' + initialLocation); 

    //Add draggable marker 
    var marker = new google.maps.Marker({ 
     position: initialLocation, //latLng, 
     title: 'Point B', 
     map: map, 
     draggable: true 
    }); 

    // Update current position info. 
    updateMarkerPosition(initialLocation); 
    geocodePosition(initialLocation); 

    // Add dragging event listeners. 
    google.maps.event.addListener(marker, 'dragstart', function() { 
     updateMarkerAddress('Dragging...'); 
    }); 

    google.maps.event.addListener(marker, 'drag', function() { 
     updateMarkerStatus('Dragging...'); 
     updateMarkerPosition(marker.getPosition()); 
    }); 

    google.maps.event.addListener(marker, 'dragend', function() { 
     updateMarkerStatus('Drag ended'); 
     geocodePosition(marker.getPosition()); 
    }); 

    function handleNoGeolocation(errorFlag) { 
     if (errorFlag == true) { 
      alert("Geolocation service failed."); 
      initialLocation = newyork; 
     } else { 
      alert("Your browser doesn't support geolocation. We've placed you in newyork."); 
      initialLocation = newyork; 
     } 
     map.setCenter(initialLocation); 
    } 
} 

function geocodePosition(pos) { 
    geocoder.geocode({ 
     latLng: pos 
    }, function(responses) { 
     if (responses && responses.length > 0) { 
      updateMarkerAddress(responses[0].formatted_address); 
     } else { 
      updateMarkerAddress('Cannot determine address at this location.'); 
     } 
    }); 
} 

function updateMarkerStatus(str) { 
    document.getElementById('markerStatus').innerHTML = str; 
} 

function updateMarkerPosition(latLng) { 
    //alert('latLng:' + latLng); 
    document.getElementById('info').innerHTML = [ 
    latLng.lat(), 
    latLng.lng() 
    ].join(', '); 
} 

function updateMarkerAddress(str) { 
    document.getElementById('address').innerHTML = str; 
} 

function codeAddress() { 
    var address = document.getElementById("address").value; 

    alert('In codeAddress'); 

    geocoder.geocode({ 'address': address }, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      }); 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
} 
//// +++++++++++++ End attempt to pinpoint location automatically  

我从相对路径更改为使用下面的语法固定的JS问题:

<script src='<%=ResolveClientUrl("~/Scripts/MainJS.js") %>' type="text/javascript"></script> 

Q1:这听起来像它的困惑在哪里可以找到JavaScript文件。

不是

<script type="text/javascript" src="../Scripts/MainJS.js"></script> 
<script type="text/javascript" src="../Scripts/CurrentJS.js"></script> 

改变这些到

<script type="text/javascript" src="/Scripts/MainJS.js"></script> 
<script type="text/javascript" src="/Scripts/CurrentJS.js"></script> 

在这些线路上的相对路径可以根据哪个视图或部分当前正被渲染的是不同的。问题2:在Firefox(版本3.6.8)中,创建页面有时只能起作用 - 你能否进一步解释 - 当它不工作时显示什么?

+0

喜添 - 为Q1,你可以重写你有什么written..seems是缺少一些文字。对于Q2,Firefox经常不会在网页上显示地图,只是一个空白的div区域。我打电话给navigator.geolocation.getCurrentPosition,应该返回具有经度和纬度位置的数据。任何时候地图都不显示,这是不确定的。在IE中它总是返回2个值。 – 2010-09-07 16:22:04