locked
dynamically add and remove rows in a table with image uploaded submit and pass data to mvc controller using jquery RRS feed

  • Question

  • User2130689380 posted

    --------------controller 

    public ActionResult SaveRevertCall(Complaint Complaints)
    {
    string jsonResult = string.Empty;

    Complaints.UserId = Convert.ToString(Session["USERID"]);
    Complaints.ASFId = Convert.ToString(Session["ASFId"]);

    DataSet ds = new DataSet();

    try
    {

    if (Request.Files.Count > 0)
    {
    HttpFileCollectionBase files = Request.Files;
    for (int i = 0; i < files.Count; i++)
    {
    HttpPostedFileBase file = files[i];
    string fname;

    if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
    {
    string[] testfiles = file.FileName.Split(new char[] { '\\' });
    fname = testfiles[testfiles.Length - 1];
    }
    else
    {
    fname = file.FileName;
    Complaints.File = "/TaskFile/" + fname;
    }

    fname = Path.Combine(Server.MapPath("~/TaskFile/"), System.IO.Path.GetFileName(fname));
    file.SaveAs(fname);
    }
    }

    ComplaintManager objComplaintManager = new ComplaintManager();
    Complaints.UserId = Convert.ToString(Session["USERID"]);
    jsonResult = objComplaintManager.SaveUpdateRevertCall(Complaints);


    }
    catch (Exception ex)
    {
    throw ex;
    }
    return Json(jsonResult, JsonRequestBehavior.AllowGet);
    }

    -----html file 

    <table id="RevertDescription" class="table" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
    <th style="width:150px">File</th>

    <th></th>
    </tr>
    </thead>
    <tbody>

    <tr>

    <td></td>

    </tr>

    </tbody>
    <tfoot>
    <tr>
    <td> <input type="file" name="File" id="fileUploaD" /></td>

    <td><input type="button" id="btnAdd" value="Add" /></td>
    </tr>
    </tfoot>
    </table>

    --------------------------js file 


    $("body").on("click", "#btnAdd", function () {

    var FileName = $("#fileUploaD");


    //Get the reference of the Table's TBODY element.
    var tBody = $("#RevertDescription > TBODY")[0];

    //Add Row.
    var row = tBody.insertRow(0);

    //Add Name cell.
    var cell = $(row.insertCell(0));
    cell.html(FileName.val());


    //Add Button cell.
    cell = $(row.insertCell(-1));
    var btnRemove = $("<input />");
    btnRemove.attr("type", "button");
    btnRemove.attr("onclick", "Remove(this);");
    btnRemove.val("Remove");
    cell.append(btnRemove);

    //Clear the TextBoxes.
    FileName.val("");

    });

    function Remove(button) {
    //Determine the reference of the Row using the Button.
    var row = $(button).closest("TR");
    var name = $("TD", row).eq(0).html();

    var table = $("#RevertDescription")[0];

    //Delete the Table row using it's Index.
    table.deleteRow(row[0].rowIndex);

    //if (confirm("Do you want to delete: " + name)) {
    // //Get the reference of the Table.
    // var table = $("#RevertDescription")[0];

    // //Delete the Table row using it's Index.
    // table.deleteRow(row[0].rowIndex);
    //}
    };

    $("body").on("click", "#btnSave", function () {

    if (window.FormData !== undefined) {

    var fileData = new FormData();

    var ProblemDescription = $("#ProblemDescription").val();

    fileData.append("ProblemDescription", ProblemDescription);

    if (ProblemDescription == null || ProblemDescription == '') {
    alert("Give some remarks");
    return;
    }

    var ComplaintID = $("#ComplaintID").val();
    fileData.append("ComplaintID", ComplaintID);


    $("#RevertDescription TBODY TR").each(function () {
    var row = $(this);
    var File = row.find("TD").eq(0).html();

    fileData.append("File", File[0]);
    });

    console.log(fileData);

    $.ajax({
    type: "POST",
    url: "/ServiceCenter/SaveRevertCall",
    data: fileData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    cache: false,
    processData: false,
    success: function (r) {
    alert(r + " record(s) inserted.");
    }
    });
    }
    });

    Actually i am creating clone of the table for multiple file uploading and passing to the controller   ,plz reply 

    Tuesday, August 27, 2019 10:54 AM

All replies