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

Question

The concept behind my question is that whenever a value is shown in my ID textbox, that value id pulls the information corresponding to that ID in a partial view to the right of the page via AJAX and Javascript.

I currently have the partial view showing on the right but there is an error alert by chrome that it cant populate the partial view, so it just shows the empty partial view (textbox etc). I've tried researching my problem but cant find anything relating to the html.partial() instead has tutorials on views already in the page which i don't want. Any ideas on where i am going wrong? below is my code regarding the issue.

Im still getting to grips with AJAX so apologies for any silly mistakes.

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 (partial view)

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

error from google

   <!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)

-->

I appreciate any feedback :)

Answer 1

I think the problem would be your url in the ajax - well actually I know since the error message also states it:

The resource cannot be found.
Requested URL: /QR/@Url.Action("Edit", "CameraInfo").

The reason is that Razor syntax is not recognized in that file.

Either set a js-variable from the partial view, like:

<!-- 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,
        ...

Or just type it by hand (the easiest solution):

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

I should also say that there is no need to keep writing $(document).ready before each method/call. Just do it once, and put all code within the scope of that.

Edit:

Also, you're binding two change events to the same textbox ( #qr-value ). Merge the code and only keep one event:

$(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

Seems that your camerainfo file requires a "Job" model. If you want to render partials and initiate the model using a controller, you can use

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