加载的部分视图的AJAX请求-MVC

Question

我的问题背后的概念是，无论何时在我的ID文本框中显示一个值，该值id通过局部视图将对应于该ID的信息通过页面右侧AJAX和Javascript。

我目前有部分视图显示在右侧，但有一个错误警报通过铬，它不能填充部分视图，所以它只显示空的部分视图（文本框等）。我试过研究我的问题，但无法找到与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) 

--> 

我明白任何反馈:)

错误

Answer 1

我认为这个问题是在阿贾克斯您的网址 - 嗯，事实上我知道，因为该错误消息还指出它：

无法找到该资源。
请求的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.."); 
      } 
     } 
    }); 
    }); 
});  

Answer 2

看来你camerainfo文件需要一个 “作业” 模式。如果你想呈现泛音和使用控制器发起的模型，你可以使用

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