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

时间:2015-04-01 11:57:51

标签: c# jquery ajax asp.net-mvc-4

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

我目前正在右侧显示局部视图,但铬有一个错误警告,它无法填充局部视图,所以它只显示空的局部视图(文本框等)。我已经尝试过研究我的问题,但是找不到与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);
        }
来自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)

-->

我感谢任何反馈:)

2 个答案:

答案 0 :(得分:1)

我认为问题将是你在ajax中的url - 实际上我知道,因为错误消息也说明了它:

  

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

答案 1 :(得分:0)

似乎你的camerainfo文件需要&#34; Job&#34;模型。如果要渲染部分并使用控制器启动模型,可以使用

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