加載的部分視圖的AJAX請求-MVC

我的問題背後的概念是，無論何時在我的ID文本框中顯示一個值，該值id通過局部視圖將對應於該ID的信息通過頁面右側AJAX和Javascript。加載的部分視圖的AJAX請求-MVC

我目前有部分視圖顯示在右側，但有一個錯誤警報通過鉻，它不能填充部分視圖，所以它只顯示空的部分視圖（文本框等）。我試過研究我的問題，但無法找到與html.partial（）相關的任何內容，而是在頁面中已有的視圖上有我不想要的教程。任何想法，我要去哪裏錯了？下面是我關於這個問題的代碼。

我仍然在與AJAX交手，所以對於任何愚蠢的錯誤表示歉意。

Jobscanner.cshtml

<div id="QR"> 
    <div id="first"> 
     <p>Hold a QR Code in front of your webcam.</p> 

     <video id="camsource" autoplay="" width="320" height="240">Webcam has failed, Please try another</video> 
     <canvas id="qr-canvas" width="320" height="240" style="display:none"></canvas> 
    @* <div class="hidden">*@ 
    <input type="text" id="qr-value" value="" placeholder="Scanned QR Code..." /> 
      <input type="text" id="qr-number" value="" placeholder="Job ID...." /> 
    <button>Reset Scan</button> 
@* </div>*@ 
    </div> 
    <div id="second"> 
    <div id='Sample'> 
      <p class="hide">@Html.Partial("CameraInfo")</p> 
    </div> 
    </div> 
</div>

QRView.js

$(document).ready(function() { 
    $("#QR").show(1000); 
    $("button").click(function() { 
     $("#qr-value").val("") 
     $("#second").hide(500); 
    }); 
}); 

$(document).ready(function() { 
    $('#qr-value').on('change', function() { 
     var string = $('#qr-value').val(); 

     if (~string.indexOf('Job')) { 
      var num = string.match(/\d+/g); 
      $("#qr-number").val(num).change(); 
      $("#second").show(1000); 
     } else { 
      $("#qr-number").val("") 
      $("#second").hide(500); 
     } 
    }); 
}); 


$(document).ready(function() { 
    $('#qr-value').on('change', function() { 
     $.ajax({ 
      type: "Get", 
      url: '@Url.Action("Edit", "CameraInfo")', 
      data: { id: $('#qr-number').val() }, 
      success: function (response) { 
       $('#Sample').html(response); 
      }, 
      error: function (response) { 
       if (response.responseText != "") { 
        alert(response.responseText); 
        alert("Some thing wrong.."); 
       } 
      } 
     }); 
    }); 
});

camerainfo.cshtml（局部視圖）

 @model JobTracker.Models.Job 

    <h2>Edit and Confirm</h2> 

    @using (Html.BeginForm()) { 
     @Html.ValidationSummary(true) 

     <fieldset> 
      <legend>Job</legend> 

    @*  @Html.HiddenFor(model => model.JobID) 

      <div class="editor-label"> 
       @Html.LabelFor(model => model.LocationID, "Location") 
      </div> 
      <div class="editor-field"> 
       @Html.DropDownList("LocationID", String.Empty) 
       @Html.ValidationMessageFor(model => model.LocationID) 
      </div><br />*@ 

      <div class="editor-label"> 
       @Html.LabelFor(model => model.HighPriority) 
      </div> 
      <div class="editor-field"> 
       @Html.DropDownListFor(model => model.HighPriority, new SelectList(
      new[] 
      { 
       new { Value = "Yes", Text = "Yes" }, 
       new { Value = "No", Text = "No" }, 
      }, 
      "Value", 
      "Text", 
      Model 
     )) 

       @Html.ValidationMessageFor(model => model.HighPriority) 
      </div><br /> 

      <div class="editor-label"> 
       @Html.LabelFor(model => model.Comments) 
      </div> 
      <div class="editor-field"> 
       @Html.TextAreaFor(model => model.Comments) 
       @Html.ValidationMessageFor(model => model.Comments) 
      </div><br /> 

       <div class="editor-label"> 
       @Html.LabelFor(model => model.Status) 
      </div> 
      <div class="editor-field"> 
        @Html.DropDownListFor(model => model.Status, new SelectList(
      new[] 
      { 
       new { Value = "In Progress", Text = "In Progress" }, 
       new { Value = "Completed", Text = "Completed" }, 
       new { Value = "Not Started", Text = "Not Started" }, 
       new { Value = "Stopped", Text = "Stopped" }, 
      }, 
      "Value", 
      "Text", 
      Model 
     )) 
       @Html.ValidationMessageFor(model => model.Status) 
      </div><br /> 

      <p> 
       <input type="submit" value="Save" /> 
      </p> 
     </fieldset> 

    } 




    @section Scripts { 
     @Scripts.Render("~/bundles/jqueryval") 
    }

CameraInfoController.cs

 [HttpGet] 
     public ActionResult Edit(int id = 0) 
     { 
      Job job = db.Jobs.Find(id); 
      if (job == null) 
      { 
       return HttpNotFound(); 
      } 
      ViewBag.LocationID = new SelectList(db.Locations, "LocationID", "LocationName", job.LocationID); 
      ViewBag.OrderID = new SelectList(db.Orders, "OrderID", "OrderID", job.OrderID); 

      return PartialView("CameraInfo", job); 
     }

從谷歌

<!DOCTYPE html> 

<html> 

    <head> 

     <title>The resource cannot be found.</title> 

     <meta name="viewport" content="width=device-width" /> 

     <style> 

     body {font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;} 

     p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px} 

     b {font-family:"Verdana";font-weight:bold;color:black;margin-top: -5px} 

     H1 { font-family:"Verdana";font-weight:normal;font-size:18pt;color:red } 

     H2 { font-family:"Verdana";font-weight:normal;font-size:14pt;color:maroon } 

     pre {font-family:"Consolas","Lucida Console",Monospace;font-size:11pt;margin:0;padding:0.5em;line-height:14pt} 

     .marker {font-weight: bold; color: black;text-decoration: none;} 

     .version {color: gray;} 

     .error {margin-bottom: 10px;} 

     .expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; } 

     @media screen and (max-width: 639px) { 

      pre { width: 440px; overflow: auto; white-space: pre-wrap; word-wrap: break-word; } 

     } 

     @media screen and (max-width: 479px) { 

      pre { width: 280px; } 

     } 

     </style> 

    </head> 



    <body bgcolor="white"> 



      <span><H1>Server Error in '/' Application.<hr width=100% size=1 color=silver></H1> 



      <h2> <i>The resource cannot be found.</i> </h2></span> 



      <font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif "> 



      <b> Description: </b>HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. &nbsp;Please review the following URL and make sure that it is spelled correctly. 

      <br><br> 



      <b> Requested URL: </b>/QR/@Url.Action(&quot;Edit&quot;, &quot;CameraInfo&quot;)<br><br> 



      <hr width=100% size=1 color=silver> 



      <b>Version Information:</b>&nbsp;Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.34212 



      </font> 



    </body> 

</html> 

<!-- 

[HttpException]: A public action method &#39;@Url.Action(&quot;Edit&quot;, &quot;CameraInfo&quot;)&#39; was not found on controller &#39;JobTracker.Controllers.QRController&#39;. 

    at System.Web.Mvc.Controller.HandleUnknownAction(String actionName) 

    at System.Web.Mvc.Controller.<BeginExecuteCore>b__1d(IAsyncResult asyncResult, ExecuteCoreState innerState) 

    at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult) 

    at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResultBase`1.End() 

    at System.Web.Mvc.Controller.EndExecuteCore(IAsyncResult asyncResult) 

    at System.Web.Mvc.Controller.<BeginExecute>b__15(IAsyncResult asyncResult, Controller controller) 

    at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult) 

    at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResultBase`1.End() 

    at System.Web.Mvc.Controller.EndExecute(IAsyncResult asyncResult) 

    at System.Web.Mvc.Controller.System.Web.Mvc.Async.IAsyncController.EndExecute(IAsyncResult asyncResult) 

    at System.Web.Mvc.MvcHandler.<BeginProcessRequest>b__5(IAsyncResult asyncResult, ProcessRequestState innerState) 

    at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult) 

    at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResultBase`1.End() 

    at System.Web.Mvc.MvcHandler.EndProcessRequest(IAsyncResult asyncResult) 

    at System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.EndProcessRequest(IAsyncResult result) 

    at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() 

    at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) 

-->

我明白任何反饋:)

錯誤

來源

2015-04-01 Matchbox2093

我認爲這個問題是在阿賈克斯您的網址 - 嗯，事實上我知道，因爲該錯誤消息還指出它：

無法找到該資源。
請求的URL：/QR/@Url.Action("Edit「，」CameraInfo「）。

原因是在該文件中無法識別Razor語法。

要麼設置一個JS-變量從局部視圖，如：

<!-- In the end of your partial view, or wherever you referense the js-file --> 
<script type="text/javascript"> 
var myJsUrl = '@Url.Action("Edit", "CameraInfo")'; 
</script>

//In your JS-file, assuming this is referensed from your partial view 
$.ajax({ 
     type: "Get", 
     url: myJsUrl, 
     ...

或者只是手工鍵入它（最簡單的解決方案）：

$.ajax({ 
     type: "Get", 
     url: '/CameraInfo/Edit', 
     ...

我也應該說在每個方法/調用之前不需要繼續寫$(document).ready。只需做一次，並將所有代碼放在該範圍內。

編輯：

此外，在綁定兩個改變事件相同的文本框（#qr-value）。合併代碼，只保留一個事件：

$(document).ready(function() { 
    $('#qr-value').on('change', function() { 

    var string = $('#qr-value').val(); 
    if (~string.indexOf('Job')) { 
     var num = string.match(/\d+/g); 
     $("#qr-number").val(num).change(); 
     $("#second").show(1000); 
    } else { 
     $("#qr-number").val("") 
     $("#second").hide(500); 
    } 

    $.ajax({ 
     type: "Get", 
     url: '/CameraInfo/Edit', 
     data: { id: $('#qr-number').val() }, 
     success: function (response) { 
      $('#Sample').html(response); 
     }, 
     error: function (response) { 
      if (response.responseText != "") { 
       alert(response.responseText); 
       alert("Some thing wrong.."); 
      } 
     } 
    }); 
    }); 
});

來源

2015-04-04 22:30:46 Mackan

這有助於@Mackan :)我不再得到錯誤，但我得到了另一個有關主頁上的HTML.Partial鏈接，但我認爲這是沒有通過身份證的事情......虐待嘗試和數字它在找到任何進一步的幫助之前先出來:)再次感謝！ :) – Matchbox2093 2015-04-05 13:27:56

看來你camerainfo文件需要一個「作業」模式。如果你想呈現泛音和使用控制器發起的模型，你可以使用

@{Html.RenderAction("actionName","controllerName")}

來源

2015-04-01 12:06:09 thsorens

hi @thsorens您是指camerainfo，cshtml或cs文件？ – Matchbox2093 2015-04-01 12:53:22

@ Html.Partial（「camerainfo」），這不會在camerainfo.cshtml要求的模型中給出。使用RenderAction將獲取使用控制器動作的部分，使您可以實例化模型並將其傳遞給視圖 – thsorens 2015-04-01 13:03:46

哦，我看到了，我修改它，因爲你說過，但仍然從谷歌瀏覽器得到相同的結果。 – Matchbox2093 2015-04-01 13:15:45

加載的部分視圖的AJAX請求-MVC

回答

相關問題