我的问题背后的概念是,每当我的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. Please review the following URL and make sure that it is spelled correctly.
<br><br>
<b> Requested URL: </b>/QR/@Url.Action("Edit", "CameraInfo")<br><br>
<hr width=100% size=1 color=silver>
<b>Version Information:</b> Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.34212
</font>
</body>
</html>
<!--
[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.<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)
-->
我感谢任何反馈:)
答案 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")}