如何通过JS将值传递给控制器​​和部分视图

Question

我正在尝试实现一个系统，其中将文本框中的值传递到局部视图，在该视图中将显示与该值相对应的详细信息。 因此，例如，如果作业“ 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);
    }

Answer 1

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

希望这可以帮助