如何将多个值传递给MVC控制器

Question

I have a table with various pieces of data. I also have a Html.TextAreaFor for to type text in. Here is the table

I need to capture the text in the Textarea for .. send it to the controller via ajax .post

<table class="table  table-striped table-hover  col-xl-12" id="policyTable">
<tr class="thead-dark">
    <th class="toggleMe1">
        UnderWriter
    </th>
    <th class="toggleMe2">
        @Html.DisplayNameFor(model => model.Client)
    </th>

    <th>
        Exp-Policies
    </th>

    <th>
        Exp-Date
    </th>
    <th class="hideMe">
        Date - Updated
    </th>
    <th>
        Reviewed-By
    </th>
    <th>
        Email-Created
    </th>
    <th>
        @Html.DisplayNameFor(model => model.CAB)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.LossRun)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.MMS)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Notes)
    </th>
    <th></th>
</tr>

@foreach (var item in Model)
{
    <tr id="id_@item.Id">
        <td class="hideMe">
            @Html.DisplayFor(modelItem => item.Id, new { id = "VisibleID" })
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.NewUw)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Client)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Expiring_Policies)
        </td>

        <td>
            @Html.DisplayFor(modelItem => item.ExpDate)



        <td class="hideMe">
            @Html.DisplayFor(modelItem => item.DateUpdated)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.InsertedBy)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.EmailCreated)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CAB)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LossRun)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.MMS)
        </td>

        <td style="width: 25%; height: 120px;">
            <div class="form-group">
                @* @Html.LabelFor(model => model.Notes, htmlAttributes: new { @class = "control-label col-md-2" })*@
                <div class="col-md-12">
                    @Html.TextAreaFor(modelItem => item.Notes, new { @class = "form-control textAreaCS", @rows = 8 })
                    @Html.ValidationMessageFor(modelItem => item.Notes, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="col-12 ml-3">
                <div class="row">
                    <input type="submit" value="Save" id="notes" class="btn btn-outline-primary btn-sm col-2" style="font-size: 16px" />
                    <div class="col-1">
                        @if (TempData["LB"] != null)
                        {
                            <div class="alert alert-danger text-center text-capitalize" style="font-size: 16px;">
                                @TempData["LB"]
                            </div>
                        }
                    </div>
                </div>

            </div>
        </td>
        <td>
            @Html.ActionLink("Review", "EditPolicy", new { id = item.Id }, new { @class = "review" })
        </td>
    </tr>
}

</table>

Here is the ajax call

    var url = "/Policy/CompletedNotes";
        var policyNotes = $("#item_Notes").text();
        var id = $("#VisibleID").val();
        $("input#notes").on('click', function () {

            alert(id);
            var data = JSON.stringify({ Id: id, polNotes: policyNotes });

            $.ajax({
                url: '/Policy/CompleteNotes',
                type: 'POST',
                contentType: 'application/json',
                data: data,
                success: function () {
                    alert('success');
                }
            });

I'm passing the ID of the row and the text in the text box. Here is the controller I'm passing to

  [HttpPost, ValidateInput(false)]
    public ActionResult CompletedNotes(CompletedPolicyVM completedPolicy, string Id, string polNotes)
    {


        int val = Convert.ToInt32(Id);


        using (Db db = new Db())
        {
            int id = completedPolicy.Id;


            NotesDTO notesDTO = db.notes.Find(id);

            if (notesDTO == null )
            {
                return Content("This policy cannot be found." + Id);
            }

            //instantiate a stringbuilder variable so I can append the text when inserting in db. 
            var sb = new StringBuilder();
            const char carriageReturn = (char)13;
            const char newLine = (char)10;
            string insertedDate = "Inserted on " + DateTime.Now.ToString("MM/dd/yyyy HH:mm") + " by " + User.Identity.Name;


            if (notesDTO.Notes == null || notesDTO.Notes == String.Empty)
            {
                notesDTO.Notes = sb.AppendLine(insertedDate).ToString() + " " + polNotes + "\n";
            }
            else
            {
                notesDTO.Notes += newLine + sb.AppendLine(insertedDate).ToString() + " " + polNotes + "\n";
            }

            db.SaveChanges();


        }


        //Save TempData message
        TempData["SM"] = "Policy saved correctly!";

        //redirect
        return RedirectToAction("CompletedPolicies");
    }

The problem:

Doesn't work. It doesn't pass the values to the controller. It's null every time. I've tried a ton of different ajax calls.. Nothing works. I can capture the Id, but not the text and when it reaches the controller it is null. If these are wrong, how do I simply send the Id of the row.. and the text typed in the textbox to the controller. ?

Answer 1

The data that passes a string, as well as the parameter that you receive as completedPolicy, is empty and is not a part of it.

your Data :

"{"Id":"id","polNotes":" policyNotes"}"

data shoud be a json type

{ Id: 'id', polNotes:' policyNotes' }

this no need :

JSON.stringify({ Id: 'id', polNotes:' policyNotes' });

and action shoud like:

[HttpPost, ValidateInput(false)]
    public ActionResult CompletedNotes( int Id, string polNotes)
    {
using (Db db = new Db())
        {
CompletedPolicyVM completedPolicy=db.CompletedPolicyVM .Find(id);
    NotesDTO notesDTO = db.notes.Find(id);
.
.
.

 db.SaveChanges();
}

ajax :

 var data = { Id: id, polNotes: policyNotes };

            $.ajax({
                url: '/Policy/CompleteNotes',
                type: 'POST',
                contentType: 'application/json',
                data: data,
                success: function () {
                    alert('success');
                }
            });