Tried to load table dynamically using AJAX but rows not displayed

Question

In a form, i have a dropdownlist and a textbox which will get user's input. Then when the user submits the form, i don't want the whole page to refresh. i only wanted the table which is just below it to refresh and load data from database. I tried code below but only alert pops up. The table is still empty.

$('#frmPrescDrugList').submit(function (e) {

        e.preventDefault(); // Prevent Default Submission

        $.ajax({
            url: '/consultation/PrescDrugList',
            type: 'POST',
            data: $(this).serialize(), // it will serialize the form data
            dataType: 'html',
            success: function (data) {
                var row_data = "";
                row_data += "@{ var rowNum = 0; } @foreach (var item in Model.LoadDrugList) {
                                            rowNum += 1;
                                            <tr Class="odd gradeX">
                                                <td>@rowNum</td>
                                                <td>@item.dsubsystem</td>
                                                <td>@item.tradename </td>
                                                <td style="text-align: center; vertical-align: middle;"><form Class="form-horizontal" role="form" action="@Url.Action("Prescription", "consultation", new {dgid = item.dgid})" method="post"><Button type="submit" Class="btn btn-default" name="btnDrugListSelect">Select</Button></form></td>
                                            </tr>
                                    }";
                $("#LoadDrugListTable").append(row_data);


                alert('Drug list has been loaded.');

            },
            error: function () {
                alert('Ajax Submit Failed ...');
            }
        }); // end ajax

    }); // end form-submit

LoadDrugListTable is the table's id. Why didn't it load the data when the ajax is already successful? Can anyone please help point out my mistake or suggest me a better example reference?

I tried following this example, but i'm stuck at the @Url.Action(). Its underlined red. And when i try to separate them by "" and + it's still underlined red saying

Too many characters in character literal.

UPDATED

This is the form i mentioned that doesn't pass the id properly. I'm passing it to a get method. By the way, this is an entirely different page than the one i mentioned above. When i try to do the same thing in another page, it passes a null paid value. Paid is the id. Maybe because this time i'm passing to another page.

"<td style='text-align: center; vertical-align: middle;'><form Class='form-horizontal' role='form' action='@Url.Action("PatientMedicalInfo", "consultation", new { paid = Html.Raw(" + data[i].paid + ") }) method='get'><Button Class='btn btn-default' name='btnSelectPatient' id='btnSelectPatient'>Select</Button></form></td>"

This is the controller:

    [HttpGet()]
    public ActionResult PatientMedicalInfo(string paid)
    {

        PatientLookupVM Patient = new PatientLookupVM();

        dynamic CurrentPatientDetailsByPtId = Patient.GetCurrentPatientDetailsByPtId(paid);
        Patient.LoadCurrentPatientDetails = CurrentPatientDetailsByPtId;

        return View(Patient);

    }

Answer 1

Try replacing double " quotes with single ' quotes in action. Well for consistency you could replace them everywhere.

<td ... action='@Url.Action("Prescription", "consultation", new {dgid = item.dgid})' ... </td>