We Keep Coding

Passing parameter to displaytemplate between different views

I have several views with different viewmodels.
Every view has "ProjectId" dropdownlist, and I want to show selected project's start date beside the "ProjectId" dropdownlist before submit.
And the "ProjectId" dropdownlist is a ViewBag.
Is there any other way besides adding start date to each viewmodel?
view:
<div class="form-inline">
Project:
<div>
#Html.DropDownList("ProjectId", new SelectList(ViewBag.ProjectsDropDownList, "Value", "Text"))
</div>
</div>

It is a bit hard to answer you without you supplying your code but I have had a look at
https://www.tutorialsteacher.com/mvc/viewbag-in-asp.net-mvc regarding viewbags which you are welcome to have a look at.
It shows that you could simply use a label with something like this in the front end:
<label>Project Start Date:</label> #ViewBag.projectStartDate
That would be if you are using ASP.NET or HTML for the client side coding
In the back end something like this :
namespace MVC_BasicTutorials.Controllers
{
public class ProjectController : Controller
{
string projectName;
int projectId;
string projectDate;
public ProjectController ()
{
projectName = "new project";
projectId = 0;
projectDate = "01-01-1990";
}
public ActionResult returnDate()
{
ViewBag.projectStartDate = this.projectDate;
return View();
}
}
}

The last approach I used:
ProjectsController:
public PartialViewResult ProjectDate(int projectId)
{
// get project start date
ViewBag.StartDate = startDate;
return PartialView("_ProjectDate");
}
_ProjectDate.cshtml:
// use ViewBag.StartDate to render html what I want
get_start_date.js
$(document).ready(function () {
var projectId = $('#ProjectId').val();
if (projectId != undefined) {
$.ajax({
url: '/Projects/GetProjectDate',
data: { ProjectId: projectId },
success: function (result) {
$("#project_date").html(result);
}
});
}});
_Layout.cshtml import get_start_date.js, and insert this code in the page I need:
<div id="project_date"></div>

DropDownList on mvc filters a display of cards/boxes, but I can't display all the cards on load or with default selection

I have a Partial View that can currently display three cards/boxes that contain snippets of information about different case studies. I want this page to on load, display all the cards, but then also have a dropdown menu that filters each card by their CaseStudyIndustry property and be able to go back to displaying all the cards when you select "Select an industry"/the default selection.
I got a lot of help from http://weblogs.thinktecture.com/cnagel/2011/06/filter-and-display-data-with-aspnet-mvc-part-2partial-views-and-jquery.html, but I can't seem to get all the cards to display onload or when selecting the default DropDownList item. I've been stuck on this for a few weeks.
Here is my code:
Partial View:
#model IEnumerable<KenCast.Models.CaseStudies>
#foreach (var item in Model)
{
await Html.RenderPartialAsync("_CaseStudyCard.cshtml", item);
}
Index/page with the dropdown menu:
<h1>#ViewData["Title"]</h1>
<fieldset>
<div>
#Html.DropDownList("Industries", "Select an industry")
</div>
<br />
<div id="target">
</div>
<div id="log">
</div>
</fieldset>
<h3>For development only</h3>
<p>This link below to create new application is for development only. Will change once Identity is added to this app.</p>
<p>
<a asp-action="Create">Create New</a>
</p>
Script from: http://weblogs.thinktecture.com/cnagel/2011/06/filter-and-display-data-with-aspnet-mvc-part-2partial-views-and-jquery.html
$(document).ready(function () {
$("#Industries").change(function () {
$("#log").ajaxError(function (event, jqxhr, settings, exception) {
alert(exception);
});
// loads all cards from all industries
// Changes cards by industry when selected from dropdown menu
var industrySelected = $("select option:selected").text();
$.get('#Url.Action("CaseStudiesByIndustryPartial")', { id: industrySelected }, function (data) {
$("#target").html(data);
});
});
});
Controller:
public IActionResult Index()
{
var industries = new SelectList(_context.CaseStudies.Select(c => c.CaseStudyIndustry).Distinct().ToList());
ViewBag.Industries = industries;
return View();
}
public PartialViewResult CaseStudiesByIndustryPartial(string id)
{
return PartialView(
_context.CaseStudies.Where(c => c.CaseStudyIndustry == id).OrderBy(c => c.CaseStudyDate)
.ThenBy(c => c.CaseStudyTitle).ToList());
}
Any help would be greatly appreciated. Thank you!!

Figured this out with the hints from Stephen Muecke. The value of the first item selected in the dropbox was "Select an industry", so I used an if statement to change the displayed cards when "Select an industry was selected.
Code within the Controller now looks like this:
//Responsible for filtering case studies when item in DropDownList is selected.
public PartialViewResult CaseStudiesByIndustryPartial(string id)
{
if (id == "Select an industry") return PartialView(
_context.CaseStudies.OrderByDescending(c => c.CaseStudyDate)
.ThenBy(c => c.CaseStudyTitle).ToList());
else return PartialView(
_context.CaseStudies.Where(c => c.CaseStudyIndustry == id).OrderByDescending(c => c.CaseStudyDate)
.ThenBy(c => c.CaseStudyTitle).ToList());
}
Not sure if this is the most elegant way to do this, but it works! If anyone has another suggestion for how to write this without repeating code, please let me know!
The code in the controller, changed the cards in the view, but would only display all of the cards after I had selected another industry and then selected "Select an industry".
I ended up creating a ViewComponent that loaded all of the cards when the page loaded. The ViewComponent ended up looking like this:
namespace KenCast.ViewComponents
{
public class CaseStudiesViewComponent : ViewComponent
{
//allows for data access
private readonly ApplicationDbContext _context;
public CaseStudiesViewComponent(ApplicationDbContext c)
{
_context = c;
}
public Task<IViewComponentResult> InvokeAsync()
{
var casestudies = (from cs in _context.CaseStudies.ToList()
.OrderByDescending(cs => cs.CaseStudyDate)
.ThenBy(cs => cs.CaseStudyTitle)
select cs).ToList();
return Task.FromResult<IViewComponentResult>(View(casestudies));
}
}
}
I called the ViewComponent in the index page (page with the dropdown menu). The index page now looks like this:
<h1>#ViewData["Title"]</h1>
<fieldset>
<div>
#Html.DropDownList("Industries", "Select an industry")
</div>
<br />
<div id="target"> #* Loads data from CaseStudiesViewComponent *#
#await Component.InvokeAsync("CaseStudies")
</div>
<div id="log">
</div>
</fieldset>
<h3>For development only</h3>
<p>This link below to create new application is for development only. Will change once Identity is added to this app.</p>
<p>
<a asp-action="Create">Create New</a>
</p>
#* Script from: http://weblogs.thinktecture.com/cnagel/2011/06/filter-and-display-data-with-aspnet-mvc-part-2partial-views-and-jquery.html *#
<script type="text/javascript">
$(document).ready(function () {
$("#Industries").change(function () {
$("#log").ajaxError(function (event, jqxhr, settings, exception) {
alert(exception);
});
//loads all cards from all industries
//Changes cards by industry when selected from dropdown menu
var industrySelected = $("select option:selected").text();
$.get('#Url.Action("CaseStudiesByIndustryPartial")',
{ id: industrySelected }, function (data) {
$("#target").html(data);
});
});
});
</script>
Hope this helps if anyone else runs into a similar issue.

Update partial view from drop down list selection using MVC 5 EF 6

I am working on my third year project and I'm struggling with this one section so badly, I have looked around and found some answers but I really done know how to implement in my code because it always just doesn't work. So I don't know what I'm doing wrong.
What i would like is for the partial view to change when the drop down selected item has changed.
This is what was generated in the view for this section.
<div class="form-group">
#Html.LabelFor(model => model.TypeID, "TypeID", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("TypeID", String.Empty)
#Html.ValidationMessageFor(model => model.TypeID)
</div>
</div>
Most solutions I have seen use a #html.dropdownlistfor().
Any help would be appreciated even if you could just point me to the right place.
The drop down list is filled from the database relationships.
I have got this to work if i use labels in an "a" tag with an href but they are hard coded onto the page. I want to use the drop down list so that if i update the database it will have the updated list instead of me going to change it in the code, its also more user friendly in my eyes.
Thanx in advance

You could retrieve the data from the server and construct/change the DOM via JQuery, or you could use a partial view that is appropriate for each question type, attaching an event handler to the change event of the drop-down via JQuery.
One approach, loading partial views:
yourNamespace.yourScript.js file (include the file in your main view via the <script> tag with the src attribute):
(function ($) {
if (!window.yourNamespace) {
window.yourNamespace = {};
}
if (!window.yourNamespace.yourPageScript) {
window.yourNamespace.yourPageScript = function () {
var populateView = function (dropDown) {
if (dropDown && dropDown.length) {
var value = dropdown.val();
$.ajax({
method: "GET",
cache: false,
url: "some.url/PopulateType",
dataType: "HTML"
data: { selectedValue: value }
})
.done(function (response) { // jQuery 1.8 deprecates success() callback
var div = $('#partialViewDiv');
div.html('');
div.html(response);
});
}
};
return {
populateView: populateView
};
};
}
}(jQuery));
Your main view could have something like this:
<script type="text/javascript">
// put the script section somewhere appropriate in the page
$(document).ready(function () {
var dropDown = $('#TypeId'); // assuming the ID of this element is 'TypeId'
dropDown.change(function () {
yourNamespace.yourPageScript.populateView(dropDown);
});
});
</script>
<div id="partialViewDiv">
#Html.RenderPartial("path to initial partial view", model);
</div>
partial view example (adjust to be proper for any particular dropdown selection):
#model namespaceName.QuestionTypeModel
<div class="form-group>
#* put controls appropriate to the particular partial views here, such as radio buttons for the multiple choice question type, etc. *#
<div>
<div class="form-group">
#Html.LabelFor(model => model.TypeID, "TypeID", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("TypeID", Model.QuestionTypeValues)
#Html.ValidationMessageFor(model => model.TypeID)
</div>
</div>
Part of the controller:
[HttpGet]
public ActionResult Index()
{
var model = new MainViewModel();
// populate the model with data here for the initial display, including the initial drop-down values,
// presumably the same way you do now
// into model.QuestionTypeValues
return View(model); // the main view
}
[HttpGet]
public ActionResult PopulateType(int selectedValue) // could use an enum for the selectable values
{
var model = new QuestionViewModel();
string partialViewName = null;
// populate with data appropriate to the partial views
switch (selectedValue)
{
case 0:
partialViewName = "partial view name for item 0";
// populate "model" with the appropriate data
break;
case 1:
partialViewName = "partial view name for item 1";
// populate "model" with the appropriate data
break;
// and so on...
default:
throw new ArgumentException("unknown selected value", "selectedValue");
break;
}
return PartialView(partialViewName, model);
}
The approach to use jQuery to build the DOM elements instead of using partial views is left as an exercise.

Updating layout part dynamically

C# asp.net MVC project: I have my index page with a button in it, I want to press it and update the same page with some results.
Here's some code:
The View: (with a button that calls the getConfig method in the controller)
#{
ViewBag.Title = "Home Page";
}
<form method="get" action="/Home/GetConfig/" >
<input type="submit" value="Get Config WS" />
</form>
<p>
#ViewBag.totalRecords
</p>
The controller:
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Test webservices";
return View();
}
public void getConfig()
{
string totalRecords = string.Empty;
wsConfig.config_pttClient client = new wsConfig.config_pttClient();
wsConfig.getConfigInput gci = new wsConfig.getConfigInput();
wsConfig.getConfigOutput gco = new wsConfig.getConfigOutput();
gco = client.getConfig(gci);
totalRecords = gco.result.totalRecords.ToString();
ViewBag.totalRecords = totalRecords;
}
I want to press the view's button and show the totalRecords on the same page.
How can I achieve this?

Edit: There might be other solutions, (if you don't mind updating your entire page) but this how I generally do it.
Ok, there are a couple of things that you need to change in order to make it work:
Create a new partial view that contains just the part that you would like to update (and wrap it an element with an id). In this example, let's call it 'Partial_TotalCount'.
This partial view will contain the following code:
<div id="updated">
<p>
#ViewBag.totalRecords
</p>
</div>
Now, change your original view so that it includes the partial view:
#{
ViewBag.Title = "Home Page";
}
<form method="get" action="/Home/GetConfig/" >
<input type="submit" value="Get Config WS" />
</form>
#Html.Partial("Partial_TotalCount", #Model)
Now, update your controller to work with an ajax request. This would make your controller looks like:
public ActionResult Index()
{
ViewBag.Message = "Test webservices";
if (Request.IsAjaxRequest())
{
getconfig();
return PartialView("Partial_TotalCount");
}
return View();
}
Now, you need to be able to submit the page when you click the button. This can be done through javascript:
First your javascript function that will update the contents:
<script type="text/javascript">
function Refresh() {
$.ajax({
url: '/Home/Index',
type: "GET",
dataType: "html",
success: function(data) {
$("#updated").html(data);
},
error: function() { alert('Refreshing error.'); }
});
}
</script>
You just need to add an onclick on your button. And you can remove the form tags from around your form aswell.
Edit: As requested by the questioner, I provide a bit of explanation on the Javascript function itself:
$.ajax means that we are doing an Ajax request. It means that we are doing some asynchronous requests with the server.
Then a couple of parameters are passed:
Url: The url that should be executed. In your example, the code behind the url "Home/GetConfig" get's executed.
Type: The type of submit that you want to do (POST, GET, ...)
dataType: The type we are expecting back from the server.
Success: The piece of javascript that needs to execute when complete. (In this case, update the DIV element with the id "WithCss" with the contents that are received with the url "Home/Getconfig".
Error: A function that is executed when the request failed for some reason.
There are a lot of other parameters you can pass (for example if you need to pass an id, and others.
For more explanation, please look at the original documentation.
Also, consider marking this answer as accepted.
I hope it works.

Try This:
Replace your input button code with the following code :
<input type="submit" id="btnSave" name="BtnSave" value="Get Config WS" />
Then in controller change the whole code for this code:
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Test webservices";
return View();
}
public ActionResult getConfig()
{
return View();
}
[HttpPost]
public ActionResult getConfig(FormCollection Form)
{
if(Form["BtnSave"]!=null)
{
string totalRecords = string.Empty;
wsConfig.config_pttClient client = new wsConfig.config_pttClient();
wsConfig.getConfigInput gci = new wsConfig.getConfigInput();
wsConfig.getConfigOutput gco = new wsConfig.getConfigOutput();
gco = client.getConfig(gci);
totalRecords = gco.result.totalRecords.ToString();
ViewBag.totalRecords = totalRecords;
}
return View();
}
Hopefully it works...!

something wrong in view page and url

I am using c# and ASP.NET MVC4 for a web application (with mobile template).
I'm having a problem with my Details view page. (First you select something from Index page and then it goes to Details page) I have put a bing map on the page and the map doesn't load.
First I thought it was something wrong with the map but its not.
I noticed that the url is
http://localhost:2550/Place/Details
of the page. However if I manually put a '1' on the end like so http://localhost:2550/Place/Details/1
then the map loads on the page. I don't understand why this is...
does anyone know why? thanks
my view page for Details:
#model Project.Models.Place
#{ ViewBag.Title = "Details";}
<h2>Place Details</h2>
<fieldset>
<div class="display-label"> Name: #Model.Name</div>
<div class="display-label">Address: #Model.Address</div>
<div class="display-label">Post Code: #Model.PostCode</div>
<div class="display-label"> PhoneNo: #Model.PhoneNo</div>
</fieldset>
<p> #Html.ActionLink("Back to List", "Index")</p>
<body onload="getMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<div>
<input type="button" value="createWalkingRoute" onclick="createDirections();" />
</div>
<div id='directionsItinerary'> </div>
</body>
#section scripts{
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
var directionsManager;
var directionsErrorEventObj;
var directionsUpdatedEventObj;
function getMap() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'mykey' });
}
function createDirectionsManager() {
var displayMessage;
if (!directionsManager) {
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
displayMessage = 'Directions Module loaded\n';
displayMessage += 'Directions Manager loaded';
}
alert(displayMessage);
directionsManager.resetDirections();
directionsErrorEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', function (arg) { alert(arg.message) });
directionsUpdatedEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', function () { alert('Directions updated') });
}
function createWalkingRoute() {
if (!directionsManager) { createDirectionsManager(); }
directionsManager.resetDirections();
// Set Route Mode to walking
directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.walking });
var seattleWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: 'Seattle, WA' });
directionsManager.addWaypoint(seattleWaypoint);
var redmondWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: 'Redmond, WA', location: new Microsoft.Maps.Location(47.678561, -122.130993) });
directionsManager.addWaypoint(redmondWaypoint);
// Set the element in which the itinerary will be rendered
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });
alert('Calculating directions...');
directionsManager.calculateDirections();
}
function createDirections() {
if (!directionsManager) {
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: createWalkingRoute });
}
else {
createWalkingRoute();
}
}
</script>
}
my controller action for Details:
public ViewResult Details(int id)
{
ViewBag.events = eventRepository.PlaceEvents(id);
return View(placeRepository.Find(id));
}

Possible cause, may be you haven't written Controller default controller with Zero arguments.
Or you haven't written controller with [HttpPost] attribute
Will be easy if you put code for the controller here.

If you say that the navigation with /1 at the end works but your current url is without the number, your url on the index page is wrong.
Your url is now something like
#Html.ActionLink("Details", "Place")
Change it to something like this:
#Html.ActionLink("Details", "Place", new { id = #Model.Id })
So the problem is that your id isn't given to your details action.