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

Question

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

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

我认为问题在于您在 ajax 中的网址 - 实际上我知道，因为错误消息也说明了这一点：

找不到资源。
请求的 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")}