javascript - 如何通过JS向 Controller 和部分 View 传递值

Question

我正在尝试实现一个系统，其中文本框中的值被传递到部分 View ，其中它将显示与该值相对应的详细信息。因此，例如，如果作业“1”位于文本框中，则部分 View 将返回该作业的详细信息以供用户更改等。关于如何将值传递给 Controller ​​然后传递给部分 View 有什么想法吗？

Job.js

  $(document).ready(function () {
        $('#qr-value').on('change', function () {
            if ($('#qr-value').val() == 'Job 1') {

                $("#second").show(1000);
            }
        });
    });

CameraInfo(部分 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.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")
}

作业 Controller .cs

// //获取:/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>

如果你想加载局部 View ，请使用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);
 }

希望这有帮助