I have a Modal that opens & gives User options to check some checkboxes. When the User checks checkboxes of his choice. I want to send all the values of checkboxes & call AJAX method.
I want to send values of selected checkboxes to the Controller method.
Here is my Code :-
// These are dynamic checkboxes - This is just an e.g
<input type="checkbox" name="name" value="Code">
<input type="checkbox" name="name" value="Code1">
<input type="checkbox" name="name" value="Code2">
<input type="checkbox" name="name" value="Code3">
// onClick event of Button
jq.get('/Controller/getData', function (data) {
jq('#placeHolder').html(data);
});
// Controller
[HttpGet]
public ActionResult getData()
{
return PartialView("_pagepartial");
}
To get the values of the checked checked boxes and add to an array
var array = [];
$('input:checked').each(function() {
array.push($(this).val());
}
And to pass to you controller
$.ajax({
type: "GET",
url: '#Url.Action("getData", "Controller")',
dataType: "html",
traditional: true,
data: { values: array},
success : function (data) {
$('#placeHolder').html(data);
}
});
assuming you controller method is
public ActionResult getData(string[] values)
{
// return some partial view based on values
}
Related
I have following view and controller code:
Index.cshtml
#using (Html.BeginForm("Create", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<span style="color:green; font-weight:bold;" id="Message">#ViewBag.Message</span>
<input type="text" id="txtMessage" />
<input type="submit" id="btnSubmit" value="Submit" />
}
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$('#btnSubmit').click(function (event) {
$.ajax({
type: "POST",
url: "/Home/Create",
dataType: "json",
contentType: "application/json; charset=utf-8",
async: false,
data: JSON.stringify({
'message': $('#txtMessage').val()
})
});
});
</script>
Controller code:
public class HomeController : Controller
{
public ActionResult Index(string message)
{
return View();
}
[HttpPost]
public ActionResult Create(string message)
{
ViewBag.Message = message;
return View("Index");
}
}
After clicking the button and making ajax call I'm not able to see the message set in the Create method to ViewBag.Message inside the index view.
If you are using Begin form and button type as submit then why write ajax method?
Remove your btnSubmit click from javascript code and use textbox as TextBoxFor,
#Html.TextBoxFor(m => m.message, new { #class = "form-control" })
it should work.
Update Answer for without strongly type
As per code, you are using Begin Form so not required to ajax call.
So first remove javascript code or if you keep that code so no meaning of that.
Now need to update the following line:
<input type="text" id="txtMessage" **name = "txtMessage"** />
And in the controller code post method the following name should be the same.
[HttpPost]
public ActionResult Create(**string txtMessage**)
{
ViewBag.Message = **txtMessage**;
return View("Index");
}
I have created a partial view which takes one parameter on a form "email address", and I would like that string passed to my controller called "InviteTeam" which is decorated as an "HttpPost".
so here is the partial view and the ajax command
<form id="inviteTeam">
<label class="sr-only" for="communityCity">Team Email Address</label>
<input class="form-control" type="text" name="teamEmailAddress" id="teamEmailAddress" placeholder="Team Email">
Invite
</form>
<script>
$(document).ready(function () {
$("#btnSubmit").click(function () {
var formdata = $("#inviteTeam").serialize();
alert(formdata);
$.ajax({
type: "POST",
url: "/habitats/InviteTeam",
data: formdata,
success: function () {
$("#inviteModal").modal("hide");
window.location.href = "/Habitats/EditCommunity/"
},
error: function (errorData) { alert(errorData); }
})
});
});
</script>
and here is my controller code: my input string is "email" is null
public ActionResult InviteTeam()
{
return PartialView();
}
[HttpPost]
public ActionResult InviteTeam(string email)
{
return RedirectToAction("EditCommunity", "Habitats");
}
Change name="teamEmailAddress" to name="email" Try the following:
<form id="inviteTeam">
<label class="sr-only" for="communityCity">Team Email Address</label>
<input class="form-control" type="text" name="email" id="teamEmailAddress" placeholder="Team Email">
Invite
</form>
<script>
$(document).ready(function () {
$("#btnSubmit").click(function () {
var formdata = $("#inviteTeam").serialize();
alert(formdata);
$.ajax({
type: "POST",
url: "/habitats/InviteTeam",
data: formdata,
success: function () {
$("#inviteModal").modal("hide");
window.location.href = "/Habitats/EditCommunity/"
},
error: function (errorData) { alert(errorData); }
})
});
});
</script>
Another solution is change the name of the parameter in your action method like:
[HttpPost]
public ActionResult InviteTeam(string teamEmailAddress)
{
return RedirectToAction("EditCommunity", "Habitats");
}
Also if you only want to redirect then you dont need any ajax call. You can simply redirect in javascript as:
window.location.href = "/Habitats/EditCommunity/"
But if you have to do some logic with your email address, then hit that controller action and return JSON as RedirectToAction will not work in AjaxCall like:
return Json("true");
In your success method of Ajax, you can check:
success: function (data) {
if (data == true){
$("#inviteModal").modal("hide");
window.location.href = "/Habitats/EditCommunity/";
}
}
I am trying to send some data from a modal dialog to my controller with Ajax. But my modelfields are always null, but I enter my actionmethod in the controller.
This is a shortend version of my cshtml-file.
#model anmespace.MyModel
<form method="post" id="formID">
...
<div class="row">
<div class="col-md-5">#Resource.GetResource("MyModal", "Firstname")</div>
<div class="col-md-7"><input type="text" class="form-control" id="firstname" value="#Html.DisplayFor(model => model.FirstName)"></div>
</div>
...
<input type="submit" class="btn btn-primary" value="Submit" />
</form>
<script>
$("#formID").on("submit", function (event) {
var $this = $(this);
var frmValues = $this.serialize();
$.ajax({
cache: false,
async: true,
type: "POST",
url: "#Url.Action("ActionName", "Controller")",
data: frmValues,
success: function (data) {
alert(data);
}
});
});
</script>
Sorry MVC/Ajax are really new for me.
If you want to bind the form data to model then, the names of HTML elements should match with Model properties.
Note: name attribute value of html input field should match to the property of a model.
When you use form and submit button then it will try to reload the page by posting data to the server. You need to prevent this action. You can do this by returning false on onSubmit event in the Form element.
When you use jquery, do not forget to keep the ajax call/events inside the $(document).ready(function(){}) function.
I have written a simple code which takes First Name as input and makes an ajax call on clicking on submit button.
Html & Jquery Code:
<script>
$(document).ready(function() {
$("#formID").on("submit", function(event) {
var $this = $(this);
var frmValues = $this.serialize();
$.ajax({
cache: false,
async: true,
type: "POST",
url: "#Url.Action("PostData", "Home")",
data: frmValues,
success: function(data) {
alert(data.FirstName);
}
});
});
});
</script>
<div>
<form method="post" id="formID" onsubmit="return false;">
<input id="FirstName" name="FirstName"/>
<input type="submit" value="submit" />
</form>
</div>
My Model :
public class Person
{
public string FirstName { get; set; }
}
Action Method:
public ActionResult PostData(Person person)
{
return Json(new { Success = true, FirstName = person.FirstName });
}
Output:
Have a good day.
I am doing a select all checkbox to delete selected posts. I am able to get the result in the jquery but I am not sure how to use that result to process in my Codeigniter Controller. Maybe someone can enlighten me. Thanks!
View File:
<input class="delete_selection" type="checkbox" name="delete_selection[]" value="1" />
<input class="delete_selection" type="checkbox" name="delete_selection[]" value="2" />
<input class="delete_selection" type="checkbox" name="delete_selection[]" value="3" />
<button id="delete_selected" name="delete_selected" class="btn btn-danger btn-small" value="" onClick="return confirm('Delete selected posts?')"><i class="icon-trash icon-white"> </i> Delete Selected</button>
JQuery:
//GET SELECTED POSTS/PAGES FOR DELETION
$("#delete_selected").click(function(event) {
/* stop form from submitting normally */
event.preventDefault();
var values = new Array();
$.each($('input[name="delete_selection[]"]:checked'), function() {
var delete_selection = $(this).val()
console.log(delete_selection);
});
});
Controller:
public function post_delete(){
//HOW TO GRAB THE RESULT FROM THE JQUERY?
//I KNOW IT SHOULD BE IN AJAX BUT NOT QUITE SURE HOW TO DO IT.
$id = $this->input->post('delete_selection');
for( $i=0; $i<sizeof($id); $i++) :
$this->posts_model->delete_post_selection($id[$i]);
endfor;
$data['message_success'] = $this->session->set_flashdata('message_success', 'You have successfully deleted your selected posts.');
redirect('admin/posts/posts_list', $data);
}
Model:
//MULTIPLE DELETE
function delete_post_selection($id) {
$this->db->where_in('post_id', $id)->delete('posts');
return true;
}
Your thinking is wrong, the controller isn't gonna 'grab' the values. But javascript is going to post to the controller
Assuming you put your html inside a form you could do something like this:
view:
<form action="/post_delete">
<input class="delete_selection" type="checkbox" name="delete_selection[]" value="1" />
<input class="delete_selection" type="checkbox" name="delete_selection[]" value="2" />
<input class="delete_selection" type="checkbox" name="delete_selection[]" value="3" />
<button id="delete_selected" name="delete_selected" class="btn btn-danger btn-small" value=""><i class="icon-trash icon-white"> </i> Delete Selected</button>
</form>
JS:
$('#delete_selection').click(function(e){
if(!confirm('Delete?')) return;//ask user if they're sure
//stop default form submitting from happening because
//we'll use ajax
e.preventDefault();
var form = $(this).closest('form');//get the parent form
$.ajax({
url: form.attr('action'),//get url to send it to
type: "POST",
data: form.serialize(),//get data from the form
success: function(){
//do something with success
}
error: function(){
//do something with error
}
});
And now you can use the data in your controller by accessing $_POST try
var_dump($_POST);
to see what has been posted
I am not sure if this is the correct way as it POST repeatedly but does the work so far.
In my JS:
//GET SELECTED POSTS/PAGES FOR DELETION
$("#delete_selection").click(function(event) {
if(!confirm('Delete selected posts?')) return false;//ask user if they're sure
/* stop form from submitting normally */
event.preventDefault();
$.each($('input[name="delete_selection[]"]:checked'), function() {
$.ajax({
type: "POST",
url: 'post_delete_selection',
data:
{ selected: $(this).val() },
success: function(data){
setTimeout(function () {
window.location.href = window.location.href;
}, 1000);
$('#ajax_message').show().html('Successfully deleted.');
},
});
});
});
My Controller:
public function post_delete_selection(){
$selectedIds = $_POST['selected']; //THIS GRABS THE VALUES FROM THE AJAX
$this->posts_model->delete_post_selection($selectedIds);
}
My Model:
function delete_post_selection($selectedIds) {
$this->db->where_in('post_id', $selectedIds)->delete('posts');
return true;
}
I have a form in my view page.it contains 5 text boxes,one search button.while the user enters values in textbox(Entering all fields are not mandatory)and click on the search button,the values I have to store it in an array and pass it to the controller and depending upon the search results i have to display the results of those searched records.
I am able to store the searched values in an array,now i want how to pass this array to the controller and how to access these values in the controller.
as Jose referred , your request may look like this :
$("#submit").click(function () {
var searchData = new Array();
$(".search-input").each(function () {
searchData.push($(this).attr('value'));
});
$.ajax({
type: "POST",
url: "/Home/Index",
data: {"searchData" : searchData},
success: function (data) {
// do something on success
},
traditional: true,
dataType: "json"
});
return false;
});
and your controller action could be :
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index([Bind(Prefix="searchData")] List<string> searchData)
{
return Index();
}
and your form have to have markup like this:
<form id="myform">
<input type="text" class='search-input' />
<input type="text" class='search-input' />
<input type="text" class='search-input' />
<input type="text" class='search-input' />
<input type="submit" id="submit" />
</form>
Use ajax. If jQuery is an option you could write something like this
$(form).submit(function()
{
var ;
$.ajax({
type: "POST",
url: "/Controller/Action",
data: JSON.stringify(_yourArrayObject),
success: function(data){
alert(data.Result);
},
dataType: "json"
});
})