[英]How to pass value to controller and partial view via JS
我正在嘗試實現一個系統,其中將文本框中的值傳遞到局部視圖,在該視圖中將顯示與該值相對應的詳細信息。 因此,例如,如果作業“ 1”在文本框中,則部分視圖將返回該作業的詳細信息,以供用戶更改等。關於如何將值傳遞給控制器的任何想法,然后是部分視圖?
Job.js
$(document).ready(function () {
$('#qr-value').on('change', function () {
if ($('#qr-value').val() == 'Job 1') {
$("#second").show(1000);
}
});
});
CameraInfo(局部視圖)
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.OrderID, "Order")
</div>
<div class="editor-field">
@Html.DropDownList("OrderID", String.Empty)
@Html.ValidationMessageFor(model => model.OrderID)
</div><br />
<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.EditorFor(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>
}
<div>
@Html.ActionLink("Back to Home Page", "Index","Home")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
作業控制器
// // GET:/ Job / Edit / 5
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 View(job);
}
//
// POST: /Job/Edit/5
[HttpPost]
public ActionResult Edit(Job job)
{
if (ModelState.IsValid)
{
db.Entry(job).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.LocationID = new SelectList(db.Locations, "LocationID", "LocationName", job.LocationID);
ViewBag.OrderID = new SelectList(db.Orders, "OrderID", "OrderID", job.OrderID);
return View(job);
}
<div id='Sample'></div>
如果要加載部分視圖,請使用ajax。
$(document).ready(function () {
$('#qr-value').on('change', function () {
$.ajax({
type: "Get",
url: '@Url.Action("Edit", "job")',
data: { id: $('#qr-value').val()},
success: function (response) {
$('#Sample').html(response);
},
error: function (response) {
if (response.responseText != "") {
alert(response.responseText);
alert("Some thing wrong..");
}
}
});
});
});
[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("Edit",job);
}
希望這可以幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.