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

I'm trying to implement a system where the value within a text box is passed onto a partial view, where it will present the details corresponding to that value. So for instances if Job "1" was within the text box , the partial view will return the details of that job for the user to change etc. Any Ideas on how to pass the value to the controller then the partial view?

我正在尝试实现一个系统,其中文本框中的值传递到局部视图,在该系统中它将显示与该值对应的详细信息。因此,对于例如Job“1”在文本框内的情况,部分视图将返回该作业的详细信息以供用户更改等。有关如何将值传递给控制器​​的任何想法然后部分视图?

Job.js

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

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

CameraInfo (partial view)

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

Job Controller.cs

// // GET: /Job/Edit/5

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

1 个解决方案

#1

<div id='Sample'></div>

if you want to load the partial view use ajax.

如果要加载局部视图,请使用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);
 }

Hope this helps

希望这可以帮助