Asked by:
dynamically add and remove rows in a table with image uploaded submit and pass data to mvc controller using jquery

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
-
User-194957375 posted
I already did that. Then I started using datatables.
https://datatables.net/examples/api/add_row.html
Now I am using devexpress ($).
Tuesday, August 27, 2019 11:43 AM -
User2130689380 posted
sir i am not asking for the datatables
ill give u link :https://www.aspsnippets.com/Articles/Pass-send-HTML-Table-rows-from-View-to-Controller-in-ASPNet-MVC.aspx
i want this way but file uploading n passing to the controller
Tuesday, August 27, 2019 11:47 AM -
User-1038772411 posted
Hello, keshu59
Please refer below link you shall do as per your requirement.
https://www.aspsnippets.com/Articles/Add-new-row-to-WebGrid-using-jQuery-in-ASPNet-MVC.aspx
Thanks.
Tuesday, August 27, 2019 11:51 AM -
User2130689380 posted
could you give me some image uploading code
Tuesday, August 27, 2019 11:58 AM -
User475983607 posted
Uploading files is covered in the standard documentation. The following links should get you started.
https://www.mikesdotnetting.com/article/259/asp-net-mvc-5-with-ef-6-working-with-files
https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
Also the coding patterns you are using are not standard and you should consider going through a few tutorials before moving forward. For example, you should use strongly typed object over DataSets and DataTables.
https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/
Tuesday, August 27, 2019 1:19 PM -
User-1038772411 posted
Hi keshu59,
Please refer this link for your image Issue : https://www.c-sharpcorner.com/UploadFile/manas1/upload-files-through-jquery-ajax-in-Asp-Net-mvc/
Tuesday, August 27, 2019 1:24 PM -
User665608656 posted
Hi keshu,
could you give me some image uploading codeTo achieve this function , there are many ways to read the uploaded files in controller, here are two ways for your reference:
- HttpRequestBase: We can use HttpRequestBase class property named Request to get collection of files or single file.
- HttpPostedFileBase: This is the easiest way to read the uploaded files into the controller .
For more details , you could refer to this link : Upload Images on Server Folder Using ASP.NET MVC
Best Regards,
YongQing.
Wednesday, August 28, 2019 8:55 AM