As for my below code i am not able to get sectionID from tr, i need to get dynamic id of sectionID on each delete button click but it is always giving me null
Here is the Jquery Script :
<script>
$(function () {
$('.btnDelete').click(function () {
var sectionID = $(this).closest('tr').find('.sectionID');
$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
url: 'CheckSectionIDagainststudentID',
data: JSON.stringify({ sectionID: sectionID.html() }),
success: function (data) {
if (data == true) {
$.alert("Cannot delete | Students exsisting in this
Section!");
}
else if (data == false) {
var secCode = JSON.parse(this.data);
var code = sectionid['sectionid'];
window.location.href = "SectionDelete?Page=data§ionid="
+ code;
}
},
failure: function (response) {
$('#result').html(response);
}
});
});
});
</script>
and here is Razor Page
#foreach (var item in Model)
{
<tr class="sectionID">
<td >
#Html.DisplayFor(modelItem => item.sectionID)
</td>
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td class="secCode">
<button style="width:49.5%" ID="Button2" type="button" onclick="location.href='#Url.Action("SectionEdit", "Section",new { id = item.sectionID, name = item.name })'">Edit</button>
<button style="width:49.5%" ID="deletebtn" runat="server" type="button" onclick="location.href='#Url.Action("SectionDelete", "Section",new { id = item.sectionID, name = item.name })'">Delete</button>
<button class="btnDelete">Delete</button>
</td>
</tr>
}
This is Controller Which i need to pass data to
[HttpPost]
public ActionResult CheckSectionIDagainststudentID(string sectionID)
{
return Json(sectionID);
}
As per your question you are not able to get value from var sectionID = $(this).closest('tr').find('.sectionID');
therefore here is a way you can achieve your result
//Your Dynamic Button should look like this
//in value Bind your sectionID # MVC
<button class="btnDelete" value="5" onclick="AjaxDelete(this)">Delete</button>
//For Function
function AjaxDelete(values) {
//Write this in Ajax
//Fetch Value from attribute value
var sectionID = $(values).attr("value"); // you will get 5 as value
//Your Ajax Call with SectionId as Parameter
}
Edit :
as you have got value
U can split the value by below code
where string is your var of sectionID
if ((~string.indexOf('\n '))) {
string= string.split('\n ')[1].split('\n')[0];
}
Use string array :
[HttpPost]
public ActionResult CheckSectionIDagainststudentID(string[] sectionID)
{
return Json(sectionID);
}
Related
I have lists of courses from different table displaying on the same view as shown below
I want a user to select the courses he wants to register by selecting the checkboxes.
How do I get the Id's of the courses selected, then pass to the controller to save to another table.
I have my HTML code as this
#model FlexSchool.Data.Models.ClassModelIndex
<tbody>
#foreach (var item in Model.AdmInstAssignCourses.Where(m => m.IsCompulsory == true))
{
<tr>
<td>
<input type="checkbox" class="checkBox" name="check" value="#item.AdmInstCourses.CourseId" />
</td>
<td> #Html.DisplayFor(modelItem => item.AdmInstCourses.CourseCode) </td>
<td> #Html.DisplayFor(modelItem => item.AdmInstCourses.CourseName)</td>
<td> #Html.DisplayFor(modelItem => item.AdmInstCourses.Units)</td>
</tr>
}
</tbody>
Where ClassModelIndex is a class of IEnumerable Classes which i used in displaying different tables to list.
My button goes thus <input type="submit" value="Register Courses" id="register" class="btn btn-rose" />
My script looks like this
<script>
$(document).ready(function () {
$("#register").click(function () {
var selectedIDs = [];
$('input[type=checkbox]').each(function () {
selectedIDs.push($(this).val());
});
$.ajax({
url = "/Course/RegisterCourse",
type = "POST",
data = JSON.stringify({ courseIDs: selectedIDs }),
contentType = "application/json; charset=utf-8",
dataType = "json",
success = function (data) {
alert(data);
},
error = function () {
alert("Error while registering courses!");
},
});
});
</script>
My Controller is
[HttpPost]
public async Task<ActionResult> RegisterCourse(List<string> courseIDs)
{
var user = HttpContext.Session.GetString(InstName);
if (user == null)
{
return RedirectToAction("Login", "Account");
}
foreach (string courseID in courseIDs)
{
AdmInstCourses obj = await _context.AdmInstCourses.FindAsync(courseID);
var mycourses = new CourseRegModel { CourseCode = obj.CourseCode, CourseTitle = obj.CourseName, CourseUnit = obj.Units};
_context.Add(mycourses);
}
await _context.SaveChangesAsync();
return RedirectToAction("MyCourses", "Course");
}
But when I run the code in debugging mode, I notice my courseIDs is not getting any list of string as Id. So it is either the script is not getting the checked boxes to pass to the controller.
What exactly am I doing wrong?
The issue is with the JavaScript Code. You have missed :checked.Use following code to get all checked values. And make sure no space between input[type="checkbox"] and :checked.
var selectedIDs = [];
$('input[type="checkbox"]:checked').each(function () {
// looping through each checkbox and storing values in array for checked ones.
selectedIDs .push($(this).val());
});
Please try below Ajax code :
var selectedIDs = [];
$('input[type=checkbox]').each(function () {
selectedIDs.push($(this).val());
});
$.ajax({
url : '/Course/RegisterCourse',
type : "POST",
data: JSON.stringify(selectedIDs),
contentType : "application/json; charset=utf-8",
dataType : "json",
success : function (data) {
alert(data);
},
error : function () {
alert("Error while registering courses!");
}
});
Directly pass json string(JSON.stringify(selectedIDs)) to server side , and in the controller method, use [FromBody] to get the values :
[HttpPost]
public async Task<ActionResult> RegisterCourse([FromBody]List<string> courseIDs)
{
}
First and foremost you can't put ids in checkbox value, because the value of checkbox can has true or false.
Try to use html.HiddenFieldFor(model => model.YourModel[i]) and replace foreach by for.
I am beginner to develope .Net MVC 5 application. But I have some problem with passing array or object to controller with Jquery.
I'm adding dynamically input fields with button. I want to pass input's data to controller. But I couldn't succeed.
Html Section is like that;
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='text' id='textbox1'>
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
Get Value button function is like that;
$("#getButtonValue").click(function () {
var list = new Array();
for (i = 1; i < counter; i++) {
list[i] = $('#textbox' + i).val();
alert(list[i]);
}
var postData = { values: list };
$.ajax({
type: "POST",
url: "/Surveys/PostQuestionAndOptions",
data: postData,
success: function (data) {
alert(data);
},
dataType: "json",
traditional: true
});
});
Even I set "traditional" by true , the model is null.
[HttpPost]
public JsonResult PostQuestionAndOptions(string[] model)
{
return Json(true);
}
Could any one help me ? Thank you.
You need to have a strongly typed object.
JavaScript
$("#getButtonValue").click(function (e) {
e.preventDefault();
var list = [];
for (var i = 1; i < counter; i++) {
list.push($('#textbox' + i).val());
}
var postData = { values: list };
$.ajax({
type: "POST",
url: "/Surveys/PostQuestionAndOptions",
data: postData,
success: function (data) {
alert(data);
},
dataType: "json",
traditional: true
});
});
Strongly typed object
public MyValues {
public list<string> values {get; set;}
}
Controller method
[HttpPost]
public JsonResult PostQuestionAndOptions(MyValues model) {
return Json(true, JsonRequestBehavior.AllowGet);
}
I have a problem to send table global from view to controller the table in controller is full but in controller affect a null for the composant of table
and this is the controller method :
public Boolean ajoutermodule(string nom, modules[] global, int cv)
{
return true;
}
And this the view and method ajax how i append my table global and how i sent this table global from view to controller :
function Addmodule() {
var nom = $("#nomprojet_I").val();
var cv = global.length;
$.ajax({
url: "/Module/ajoutermodule",
type: "POST",
dataType: 'json',
data: {
"nom": nom,
"global": global,
"cv": cv,
},
success: function (responseText) {
debugger;
if (responseText == "True") {
alert("Succes");
}
else {
alert("error");
}
}
});
}
var global = [];
function OnGetSelectedFieldValues(s, e) {
var SelectedUsers = $("#teamlist_I").val() + " " + $("#teamid_I").val();
listbox.AddItem(SelectedUsers);
var nom = $("#teamlist_I").val();
var id = $("#teamid_I").val();
global.push({ "id": id, "nom": nom });
debugger;
}
and when i added the length it send him correctly to controller.
but method ion your controller like this:
public Boolean ajoutermodule(string nom, stirng s, int cv)
{
return true;
}
and add this to your method ajax
var s = JSON.stringify(global);
function Addmodule() {
var nom = $("#nomprojet_I").val();
var s = JSON.stringify(global);
var cv = global.length;
$.ajax({
url: "/Module/ajoutermodule",
type: "POST",
dataType: 'json',
data: {
"nom": nom,
"s": s,
"cv": cv,
},
success: function (responseText) {
debugger;
if (responseText == "True") {
alert("Succes");
}
else {
alert("error");
}
}
});
}
it will work inchallah
Please try this code for ASP.NET MVC –
View.cshtml
<table id="StepsTable">
<tr>
<td>Step 1</td>
<td>#Html.TextBox("step1")</td>
</tr>
<tr>
<td>Step 2</td>
<td>#Html.TextBox("step2")</td>
</tr>
<tr>
<td>Step 3</td>
<td>#Html.TextBox("step3")</td>
</tr>
</table>
<input id="SendToControllerButton" type="button" value="Send to the server"/>
<script>
$(document).ready(function () {
$("#SendToControllerButton").click(function () {
var data = {};
//Collects the data from textboxes and adds it to the dictionary
$("#StepsTable tr").each(function (index, item) {
var tds = $(this).find("td");
var textBoxTitle = $(tds).eq(0).text();
var textboxValue = $(tds).eq(1).find("input").val();
data["stepsDictionary[" + index + "].Key"] = textBoxTitle;
data["stepsDictionary[" + index + "].Value"] = textboxValue;
});
//Makes ajax call to controller
$.ajax({
type: "POST",
data: data,
url: "/Home/ProcessStepsValues",
success: function (message) {
alert(message);
}
});
});
});
</script>
And then sends the data to controller
Controller.cs
[HttpPost]
public string ProcessStepsValues(Dictionary<string, string> stepsDictionary)
{
string resultMessage = string.Empty;
if (stepsDictionary != null)
{
resultMessage = "Dictionary data passes to controller successfully!";
}
else
{
resultMessage = "Something goes wrong, dictionary is NULL!";
}
return resultMessage;
}
Please refer the site for more details
https://alexkuznetsov.wordpress.com/2013/05/08/asp-net-mvc-pass-dictionary-data-from-view-to-controller/
This is front end,
<div class="uk-width-1-4 ">
<table class="uk-table uk-table-striped uk-table-hover" id="tabledata">
<thead>
<tr>
<th><input type="checkbox" ></th>
<th>Site ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="chkall" value="<%= d.siteid%>">
</td>
<td><%=d.siteid%></td>
</tr>
<% });
} %>
</tbody>
</table>
</div>
This is backend,
var user_id=req.query.user_id;
var siteid=req.query.chkall;
console.log("chkall =="+siteid);
sql="UPDATE site SET userid='"+user_id+"' WHERE siteid IN('"+siteid+"')";
}
getSQLData(sql, function(resultsets){
console.log("user...sql"+sql);
userresults = resultsets;
});
You can use it like this:
$("input[type='checkbox']").val();
Hope will help you.
If you are doing form submit, and if the check-box un-checked the false value will not go to the back-end. You should have some hidden value if check box un-checked.
If it is ajax call, you can get checkbox value as like below
$("input[type='checkbox']").val();
or
$("#checkboxid").val();
If you submit form then write name tag. And if you send data from ajax then get value by element id then send to server.
You do like this..
var chk = document.getElementById(checkboxid).checked;
if (chk == true) {
var chkval=$("#checkboxid").val();
}
If you have in list then do loop and add to a global variable and use that variable.
//check box
<asp:CheckBox ID="chkpermission" runat="server" onclick="checking(this.id);" Checked='<%# Convert.ToBoolean(Eval("permission")) %>' />
<script type="text/javascript">
function checking(id) {
$('#ctl00_ContentPlaceHolder1_lblresponce').val('');
if (id) {
ids = id.split('_');
var chkval = document.getElementById(id).checked;
var TitleId = "ctl00_ContentPlaceHolder1_grdpermissions_" + ids[3] + "_hdntitleid"; //here i am getting the value from the grid
var pagePath = window.location.pathname;
var param = JSON.stringify({ "TitleId": itleId,"chkval":chkval });
$.ajax({
type: "POST",
url: pagePath + "/updatevalue",
data: param,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data != null) {
var result = data.d;
$('#ctl00_ContentPlaceHolder1_lblresponce').text('Updated successfully');
}
},
error: function () {
var r = jQuery.parseJSON(response.responseText);
alert("Message: " + r.Message);
alert("StackTrace: " + r.StackTrace);
alert("ExceptionType: " + r.ExceptionType);
}
});
}
}
</script>
in the back end code
[WebMethod]
public static Boolean updatevalue( string TitleId, string chkval)
{
Boolean flag = false;
if ( TitleId != "" && chkval !="")
{
//Update your your query here with single id...
flag=true;
// return flag if updated
}
return flag;
}
I hope it works in your case.
I am trying to do inline editing by cell, not by row, upon a double click. This much works but it won't update the record- the "SaveCustomer" call to controller isn't made. What is it that I'm doing wrong?
here is my index view file (part of it, the rest is irrelevant)
#foreach (var item in Model.Drivers)
{
<tr id="#item.ID">
<td id="id">
#Html.DisplayFor(modelItem => item.ID)
</td>
<td id="lastName">
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td id="firstName">
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td id="seniority">
#if (item.Seniority != null) {#Convert.ToDateTime(item.Seniority).ToShortDateString()}
</td>
<td>
<td> //more go here </td>
Then here is the javascript file- sorry for the formatting, happens everytime I copy&paste
$("td").dblclick(function () {
if (!$(this).hasClass("edit")) {
var value = jQuery.trim($(this).html());
$(this).html("<input id=\"txtEdit\" type=\"text\" class=\"textbox\" value=\"" + value + "\" onblur=\"SaveValue(this, '" + value + "')\" onfocus=\"PutCursorAtEnd(this)\" />");
$(this).addClass("edit");
$("#txtEdit").focus();
}
});
function PutCursorAtEnd(obj) {
if (obj.value == obj.defaultValue) {
$(obj).putCursorAtEnd(obj.length);
}
}
function SaveValue(obj, oldValue) {
var value = $(obj).val();
$(obj).parent().removeClass("edit");
if (value != oldValue) {
var property = $(obj).parent().attr("id");
var id = $(obj).parent().parent().attr("id");
$.ajax({
type: "POST",
url: '#Url.Action("SaveCustomer", "save")',
data: { ID: id, Property: property, Value: value },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: SaveCustomer_Success,
error: Error
});
}
else {
$(obj).parent().html(oldValue);
}
}
function SaveCustomer_Success(data, status) {
$(data.d.ID).parent().html(data.d.NewValue);
}
and lastly here is the controller method
public object SaveCustomer(int ID, string Property, string Value)
{
Driver driver = unitOfWork.DriverRepository.GetByID(ID);
switch(Property) {
case "id":
driver.ID = Convert.ToInt32(Value);
break;
case "firstName":
driver.FirstName = Value;
break;
case "lastName":
driver.LastName = Value;
break;
case "seniority":
driver.Seniority = Convert.ToDateTime(Value);
break;
}
unitOfWork.DriverRepository.Update(driver);
unitOfWork.Save();
return new
{
ID = ID,
NewValue = Value
};
}
Much help appreciated, thanks!
Remove following line from your ajax options because you are not sending json type data.
contentType: "application/json; charset=utf-8"
Since you are sending a POST request you have to add HttpPost attribute to controller. And also you are expecting json result, so your controller should be like below.
[HttpPost]
public JsonResult SaveCustomer(int ID, string Property, string Value)
{
/// ...
return Json(new { ID = 1, NewValue = 1 }, JsonRequestBehavior.AllowGet);
}
Try removing data, contentType and dataType from Ajax call and change the url to:
url: 'save/SaveCustomer?ID=' + id + '&Property=' + property + '&Value=' + value,
put a break point in the controller to see if the call hits it. There is no reason why it will not.
Use Chrome browser and open JavaScript console. You will see why it doesn't work, if it doesn't work after this change.