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

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

我目前在右侧显示部分视图，但铬有一个错误警告，它无法填充局部视图，所以它只显示空的局部视图（文本框等）。 我已经尝试过研究我的问题，但是找不到与html.partial（）有关的任何内容，而是在页面中已有我不想要的视图的教程。 关于我哪里出错的任何想法？ 下面是关于这个问题的代码。

我仍然在掌握AJAX，因此对任何愚蠢的错误道歉。

Jobscanner.cshtml

 
 
Hold a QR Code in front of your webcam.
   @* 
*@   Reset Scan @* 
*@ 
 
 
 
@Html.Partial("CameraInfo")
 
 
  

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 
Edit and Confirm
 @using (Html.BeginForm()) { @Html.ValidationSummary(true) 
 
Job
 @* @Html.HiddenFor(model => model.JobID) 
 @Html.LabelFor(model => model.LocationID, "Location") 
 
 @Html.DropDownList("LocationID", String.Empty) @Html.ValidationMessageFor(model => model.LocationID) 

*@ 
 @Html.LabelFor(model => model.HighPriority) 
 
 @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) 

 
 @Html.LabelFor(model => model.Comments) 
 
 @Html.TextAreaFor(model => model.Comments) @Html.ValidationMessageFor(model => model.Comments) 

 
 @Html.LabelFor(model => model.Status) 
 
 @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) 

 
  
 
 } @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); } 

来自谷歌的错误

        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; } }    
Server Error in '/' Application.
 
 The resource cannot be found.    Description: 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.  Please review the following URL and make sure that it is spelled correctly. 

  Requested URL: /QR/@Url.Action("Edit", "CameraInfo")

 
 Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.34212    <!-- [HttpException]: A public action method '@Url.Action("Edit", "CameraInfo")' was not found on controller 'JobTracker.Controllers.QRController'. at System.Web.Mvc.Controller.HandleUnknownAction(String actionName) at System.Web.Mvc.Controller.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.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.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

我认为问题将是你在ajax中的url – 实际上我知道，因为错误消息也说明了：

无法找到该资源。
请求的URL：/QR/@Url.Action(“Edit“，”CameraInfo“）。

原因是该文件中无法识别Razor语法。

从局部视图中设置js变量，如：

 //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")}