Develop Reference

ASP.Net MVC passing data from script to new view

Hi everyone and thanks for reading this message at first.
I am currently struggling with an ASP.Net MVC Framework project for passing data between views.
I have a controller Model with Index View and a javascript that helps me getting ids of objects clicked on a 3d model rendered in a canvas. Here is the view :
<div class="col-md-10">
<canvas id="viewer"></canvas>
</div>
<div class="col-md-2">
<btn id="AddEventObjects" class="btn btn-eiffage-red">Create a task</btn>
<table id="selectedElements" class="table table-striped">
<thead><tr><th>Selected parts</th></tr></thead>
</table>
</div>
<script type="text/javascript">
var viewer = new xViewer('viewer');
var selectedIds = [];
viewer.on('loaded',
() => {
viewer.start();
});
viewer.on('pick', function (args) {
if (args == null || args.id == null) {
return;
}
var id = args.id;
//If the id was previously clicked then remove it from the list and remove the highlight
if (selectedIds.includes(id)) {
var index = selectedIds.indexOf(id);
selectedIds.splice(index, 1);
} else {
selectedIds.push(id);
}
//Add elements to the table
var table = document.getElementById('selectedElements');
var oldtbody = document.getElementById('selectedElementsBody');
if (oldtbody) {
oldtbody.remove();
}
var tbody = document.createElement('tbody');
tbody.id = "selectedElementsBody";
for (var i = 0; i < selectedIds.length; i++) {
var row = document.createElement('tr');
var cell = document.createElement('td');
cell.textContent = selectedProperties[i];
row.appendChild(cell);
tbody.appendChild(row);
table.appendChild(tbody);
}
});
viewer.load('../Content/3d/Maintenance.wexbim');
</script>
With the script under I would like to open another window passing the selectedIds array :
<script type="text/javascript">
$('#AddEventObjects').click(function () {
$.ajax({
url: "#(Url.Action("AddEventObjects", "Planning"))",
type: "GET",
dataType : "json",
data: { selectedObjects: selectedIds},
cache: false,
async: true,
traditional: true,
success: function (data) {
window.location = "/Planning/AddEventObjects";
},
error: function () {
alert("error");
}
});
});
</script>
Knowing that my controller Planning has an action called AddEventObjects:
public ActionResult AddEventObjects(string[] selectedObjects) {
ViewBag.Title = "Ajout intervention";
var addEventObjectsViewModel = new AddEventObjectsViewModel {
Title = "",
StartTime = "",
EndTime = "",
AllUsers = _context.Users.ToList(),
SelectedUsers = new List<ApplicationUser>(),
PostedUsers = new PostedUsers(),
ObjectsIds = selectedObjects.ToList(),
};
addEventObjectsViewModel.PostedUsers.SelectedIds = addEventObjectsViewModel.SelectedUsers.Select(x => x.Id).ToArray();
return View(addEventObjectsViewModel);
}
I would like it to open the following view that displays the selectedIds :
#model Maintenance.Web.Models.AddEventObjectsViewModel
using (Html.BeginForm("AddEvent", "Planning", FormMethod.Post, new { #class = "form-horizontal", role = "form" })) {
#Html.AntiForgeryToken()
<h4>Créer une nouvelle intervention</h4>
<div class="form-horizontal col-md-12">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-row col-md-12">
<div class="col-md-4">
<div class="form-group">
#Html.LabelFor(m => m.ObjectsIds, htmlAttributes: new { #class = "control-label" })
<table class="table table-striped" style="width:100%; margin-top:20px">
<thead>
<tr>
<th>Id</th>
</tr>
</thead>
#if (Model != null) {
foreach (var objectId in Model.ObjectsIds) {
<tr>
<td>#objectId</td>
</tr>
}
}
</table>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<div class="col-md-10">
<input type="submit" class="btn btn-eiffage-red" value="Ajouter" />
</div>
</div>
</div>
}
With a more basic question : how can I pass an array from a javascript in a view to another view?
Thanks a lot for your help.

If you are passing an array of data, there are a few ways. The easiest of ways is to do the following. Join the array IDS into a comma separated string:
var idList = data.PostedUsers.SelectedIds.join(); //comma sep list
window.location = "/Planning/AddEventObjects?ids=" + idList;
This would work with what you have very simply; it will build a URL like:
/Planning/AddEventObjects?ids=1,2,3,4
In the backend, you have a "string ids" parameter, and split it by comma, and use the IDs however you need to.

Thanks Brian Mains!
I went with passing data in the url as you suggested.
I just used Json serialized data instead of coma separated values :
<a id="CreateEvent" class="btn" href="">Créer une intervention</a>
...
var createLink = "/Planning/AddEventObjects?ids=" + JSON.stringify(model.ids);
$('#CreateEvent').attr("href", createLink);
And then in my controller :
public ActionResult AddEventObjects(string ids) {
if (ids == null) {
return HttpNotFound();
}
string[] objectIds = JsonConvert.DeserializeObject<string[]>(ids);
}

I have a requirement which I need to display price based on drop down selection

I have a requirement which I need to display price based on drop down selection. and that price comes from same db, when I click one Test from dropdown then respected price of that test should display in textbox.The value is binding in textbox after selecting option from dropdown also it is displaying after taking span but not displaying on textbox, please tell me solution because i want to display it only on textbox .
here is Error Image
Model class
public partial class TwoDDiagnostic
{
public int TwoD_ID { get; set; }
public string TwoDDiagnostic_Name { get; set; }
public string TwoD_Price { get; set; }
public Nullable<System.DateTime> TwoD_Date { get; set; }
public Nullable<int> centr_Id { get; set; }
}
Controller
IEnumerable<SelectListItem> selectList2D = from twod in db.TwoDDiagnostics
where twod.centr_Id == Id
select new SelectListItem()
{
Text = twod.TwoDDiagnostic_Name,
Value = twod.TwoDDiagnostic_Name
};
var lasttwoD = db.TwoDDiagnostics.Where(x => x.centr_Id == Id).OrderByDescending(c => c.TwoD_ID).Take(1).FirstOrDefault();
if (lasttwoD == null)
{
ViewBag.twoDID = new SelectList(selectList2D, "Value", "Text");
model.ViewModel_TwoDDiagnostic = null;
return View(model);
}
string twodname = (from sub in db.TwoDDiagnostics where sub.TwoD_ID == lasttwoD.TwoD_ID select sub.TwoDDiagnostic_Name).First();
ViewBag.twoDID = new SelectList(selectList2D, "Value", "Text", twodname);
View
<div class="form-inline">
<label for="inputEmail1" class=" col-lg-2 col-sm-4 control-label">2D Diagnostic Services</label>
<div class="col-lg-5">
#Html.DropDownListFor(model => model.PTwoDDiagnostic_name, (SelectList)ViewBag.twoDID, "- Select 2D Diagnostics -", new { #class = "form-control ", #id = "twopID", #onchange = "fill()" })
</div>
<div class="col-lg-3">
#*<span class="form-control" id="twoprice"></span>*#
#Html.TextBoxFor(model => model.PTwoDDiagnostic_price, new { #class = "form-control ", #id = "twoprice" , #onchange = "fill()"})
</div>
</div>
here is json method
public JsonResult GetTwoDPrice()
{
AllViewModel model = new AllViewModel();
Session["Two_D"] = model.TwoD_ID;
var id = (int)Session["Two_D"];
if (!string.IsNullOrEmpty(Session["Two_D"].ToString()))
{
//int Id = (int)Session["Two_D"];
var Record = (from patient in db.TwoDDiagnostics
where patient.TwoD_ID == id
select new
{
TwoD_ID = patient.TwoD_ID,
TwoD_Price = patient.TwoD_Price
}).FirstOrDefault();
return Json(Record, JsonRequestBehavior.AllowGet);
}
return Json("", JsonRequestBehavior.AllowGet);
}
here is a script
<script type="text/javascript">
$("#twopID").on('change', function (event) {
$.ajax({
url: "#Url.Action("GetTwoDPrice", "Center")",
type: "Get",
success: function (data) {
debugger;
console.log(data.TwoD_Price);
$('#twoprice').text(data.TwoD_Price);
}
});
});
</script>

You need to use the jquery val() method to set the Value for the TextBox. If you use text() method, it sets the innerText of the input element (in between the <input> and </input> HTML tags) which is applicable only for HTML Elements like span, label, h, div, etc.
$('#twoprice').val(data.TwoD_Price);

MVC Core, How to retrieve the index of one of the List object

I am sorry for being unclear. Here's my code which I hope explain more
Controller:
[HttpPost]
public IActionResult Test(int classid)
{
return View();
}
View:
<form asp-action="Test">
#for (int i = 0; i < Model.Count(); i++)
{
var buttonid = "btnSubmit" + i;
#Html.TextBoxFor(model => Model[i].Name)
#Html.TextBoxFor(model => Model[i].ClassName)
<input name="submit" id="#buttonid" type="button" data-classid="#Model[i].ClassID" value="Go to class Form" class="btn btn-default MyButtonClass" style="font-size: 14px" />
}
<script>
$(document).on("click", ".MyButtonClass", function () {
var id = $(this).data("classid");
alert(id);
$.ajax({
type: "POST",
url: "/StudentController/Test",
data: { classid: id }
});
});
</script>
</form>
So what I wanted to do is when the user click the submit, it will redirect to another form which contain the className information (I know how to redirect to another page), however, the problem is that in another controller, I could only retrieve List and not the selected index className. Is there any method to retrieve the index when the user click submit?
Thanks

I've put an answer below which should hopefuly help you on your way.
First of all, build you your list of students in your controller.
public class TestController : Controller
{
public ActionResult Test()
{
var list = new List<Student>()
{
new Student()
{
Name = "Student1",
ClassID = 1,
ClassName = "ClassA"
},
new Student()
{
Name = "Student2",
ClassID = 2,
ClassName = "ClassB"
},
new Student()
{
Name = "Student3",
ClassID =3,
ClassName = "ClassC"
}
};
//You can call a service and populate your own data.
return View("Test", list);
}
}
Specify the views model
#model List<TestMVC.Student>
Then loop through each student, generating a unique id for each button and putting the classid (what ever key id you need) into the data-classid attribute.
#for (int i = 0; i < Model.Count(); i++)
{
var buttonid = "btnSubmit" + i;
#Html.TextBoxFor(model => Model[i].Name)
#Html.TextBoxFor(model => Model[i].ClassName)
<input name="submit" id="#buttonid" type="button" data-classid="#Model[i].ClassID" value="Go to class Form" class="btn btn-default MyButtonClass" style="font-size: 14px" />
<br/>
}
We also specify a new css class called "MyButton". This will serve the jquery selector.
<style>
.MyButtonClass {
color:red;
}
</style>
Then use Jquery to capture the button clicked, take off the id and post id as a parameter to which ever controller and action you want.
<script>
$(document).on("click", ".MyButtonClass", function () {
var id = $(this).data("classid");
alert(id);
$.ajax({
type: "POST",
url: "/YourController/YourAction",
data: {classid:id}
});
});
</script>
The line for "data". The "classid" must be the same name as the parameter on your controller. So the posted actions signature would be
[HttpPost]
public void YourAction (int classid)
{
}
Hope that helps.

Try this:
<div id="classList">
#for (int i = 0; i < Model.Count(); i++)
{
var buttonid = "btnSubmit" + i;
#Html.TextBoxFor(model => Model[i].Name)
#Html.TextBoxFor(model => Model[i].ClassName)
<button id="#buttonid" data-classid="#Model[i].ClassID" class="btn btn-default MyButtonClass">Go to class Form</butotn>
}
</div>
<script>
$(document).ready(function()
{
$(".MyButtonClass").on("click", function ()
{
var id = $(this).data("classid");
console.log(id);
$.ajax({
type: "POST",
url: "/StudentController/Test",
data: { classid: id },
success: function(data)
{
// put redirect in here
window.location = .....;
},
error: function()
{
// error handling
}
});
});
});//------- this was missing!!!!
</script>
In your controller:
[HttpPost]
public IActionResult Test(int classid)
{
// put debugger here so we know if we landed
return new { success=true};
}
You are using an ajax post so you probably just want data returned, not an entire view. Or do you? What exactly is supposed to happen when you get here?

Dependent multiselect dropdown using chosen and select2 plugins

This is the code I have written in View :
<div class="col-lg-12" style="margin-bottom: 20px;">
<div class="form-group">
<label class="col-sm-3 control-label" style=" margin-top: 14px; ">Domains <font size="3" color="red">*</font></label>
<br />
<div class="col-sm-4" style="width:50%;">
#Html.ListBoxFor(m => m.SelectedDomains, Model.AllDomains,
new { #class = "chosen", multiple = "multiple", id = "drpDomains", style = "width: 350px;",onchange="FillDomain();" })
</div>
</div>
</div>
<div class="col-lg-12" style="margin-bottom: 20px;">
<div class="form-group">
<label class="col-sm-3 control-label" style=" margin-top: 14px; ">Domains new categories <font size="3" color="red">*</font></label>
<br />
<div class="col-sm-4" style="width:50%;">
#Html.ListBoxFor(m => m.SelectedDomainCategories, Enumerable.Empty<SelectListItem>(),
new { #class = "select2", multiple = "multiple", id = "multidomaincategory", style = "width: 350px;" })
</div>
</div>
</div>
<link href="~/Scripts/MultiSelect/chosen.css" rel="stylesheet" />
For Domains, I have used Chosen plugin, and for categories, i have used select2 plugin
<script type="text/javascript">
$(".chosen-deselect").chosen({ allow_single_deselect: true });
$(".chosen").chosen().change();
$(".chosen").trigger('liszt:updated');
</script>
<script>
function FillDomain() {
$("#drpDomains option[value='']").removeAttr("selected");
var selectArr = [];
$('#drpDomains').each(function () {
selectArr.push($(this).val());
});
var a = JSON.stringify(selectArr);
var reference = this;
$.ajax({
url: #Url.Content("~/MyTemplate2/FillIndustry1"), //FillIndustry1 is a method in Controller
type: "POST",
dataType: "JSON",
data: { Domain: a },
success: function (DomainCategories) {
$("#multidomaincategory").html("");
$("#multidomaincategory").removeAttr("selected");
var s = JSON.stringify(DomainCategories);
var t = JSON.parse(s);
for (var key in t) {
$("#multidomaincategory").append("<option value=" + t[key]["Value"] + ">" + t[key]["Text"] + "</option>");
}
},
error: function (data) {
alert("failure error" + data);
var t = window.JSON.parse(data.d);
alert("failueee" + t);
}
});
//I'm trying to remove all the selected items from dependent dropdown (#multidomaincategory) when all items from Domains(#drpDomains) are cleared
if ($("#drpDomains").val() == null || $("#drpDomains").val() == "") {
$("#multidomaincategory").removeAttr("selected");
$("#multidomaincategory").css('display', 'none');
}
}
</script>
Controller :
[HttpPost]
public ActionResult FillIndustry1(string Domain)
{
JArray jsonMembersArr = (JArray)JsonConvert.DeserializeObject(Domain);//convert SymptomString from json string to array
ProfessionalTrans objprofessionaltrans = new ProfessionalTrans();
string listdomains = "";
foreach (var a in jsonMembersArr)
{
listdomains = string.Join(",", a);
}
var DomainCategories = objprofessionaltrans.GetDepCategories(listdomains);
return Json(DomainCategories.ToList());
}
Data Access Layer(Transaction):
public IEnumerable<SelectListItem> GetDepCategories(string domains)
{
//GetDepCategories method - To get categories based on Domains
PTS_CommonEntities objentity = new PTS_CommonEntities();
List<SelectListItem> allskills = new List<SelectListItem>();
List<GetCatListbasedDomain> catnames = objentity.usp_GetCatListBasedOnDomains(domains).ToList();
foreach (var it in catnames)
{
allskills.Add(new SelectListItem { Value = it.CategoryID.ToString(), Text = it.CategoryName });
}
return allskills.AsEnumerable();
}
When I am clearing(closing) the selected items in Domains, the respective Categories are cleared from list, but not in the text box
Image Before Clearing
Image After Clearing the Domains
As you can see, the list is being cleared, but the selected items are still being shown in the UI.
Can someone please find out why the items are being displayed even after clearing them???

Because you are trying to clear the wrong element. #multidomaincategory is the select2 list that holds all of the values, there is a dynamic span class that gets rendered to the page right after this element, look at the html that select2 produces in your browser. Try:
$('#multidomaincategory').next().find('li').html('');
They are cleared from the list because $("#multidomaincategory").html(""); clears the html of the list of categories, not the rendered text elements in the text box.
Although a better way: $('#multidomaincategory').select2('data', null)

Cascading DropDown not return value

I have a two cascading dropdown, when I run the application everything works fine, because the cascade works, but when I get the value of the dropdown only get the value of first dropdown. The second I always get the value of zero.
The ViewModel code:
public class MyViewModel
{
public string SelectedUniversidadId { get; set; }
public string SelectedCiudadId { get; set; }
public IEnumerable<UNIVERSIDAD> Universidades { get; set; }
}
Partial view code:
<script type="text/javascript">
$(function () {
$('#universidad').change(function () {
var selectedUniversidadId = $(this).val();
$.getJSON('#Url.Action("GetCiudadList", "Consultorio", new { Area = "Superusuario", controller = "Consultorio" })', { UniversidadId: selectedUniversidadId }, function (myData) {
var citiesSelect = $('#ciudad');
citiesSelect.empty();
$.each(myData, function (index, itemData) {
citiesSelect.append($('<option/>', {
value: itemData.Value,
text: itemData.Text
}));
});
});
});
});
</script>
#model RolesMVC3.Areas.Superusuario.Models.MyViewModel
<div>
Universidad:
#Html.DropDownListFor(x => x.SelectedUniversidadId, new SelectList(ViewBag.IdUniversidad, "IdUniversidad", "Nombre"), "-- Selecione Universidad --", new { id = "universidad" })
</div>
<div>
Ciudad:
#Html.DropDownListFor(x => x.SelectedCiudadId, Enumerable.Empty<SelectListItem>(), "-- Seleccione Ciudad --", new { id = "ciudad" })
</div>
Controller code:
public ActionResult GetCiudadList(int UniversidadId)
{
decimal idd = (decimal)UniversidadId;
var universidades = (from u in db.UNIVERSIDAD
join s in db.SEDE_UNIVERSIDAD on u.IdUniversidad equals s.IdUniversidad
join c in db.CIUDAD on s.IdCiudadSede equals c.IdCiudad
where u.IdUniversidad == idd
select c).ToList();
var myData = universidades.Select(a => new
{
Text = a.NombreCiudad,
Value = a.IdCiudad.ToString(),
});
return Json(myData, JsonRequestBehavior.AllowGet);
Thanks and blessings

You need a controller action that receives 2 parameters (selected values for the 2 dropdowns). Also, pay attention to the values of the name attributes for the input elements. the name of the parameters need to be the same as the "name" input attribute.