We Keep Coding

Assigning a Model Property to a textbox using jQuery

I'm unsure if this is possible but I want to use jQuery to assign value from my bound model to different textboxes inside a PartialView.
Originally when the page loads, it populates correctly with all of the model information. However I would like to implement a DDL to view historical updates (retrieved from my pre-populated DB).
I am able to call an Action method inside my respective controller which accepts a revisionID. I have verified that the method is returning the correct data.
Please see below for my code snippets:
Partial View:
$('#revisionDDL').change(function () {
var selectedRevisionID = $(this).val();
if (selectedRevisionID == '') {
selectedRevisionID = #Model.RevisionID - 1;
}
var url = '#Url.Action("GetAgreementByRevision")';
$.get(url, { revisionID: selectedRevisionID }, function () {
$('#ChangeReason').val('#Model.ChangeReason');
})
});
Input element:
<div class="input-group">
<span class="input-group-addon" id="change-reason">Change Reason</span>
#Html.TextAreaFor(m => m.ChangeReason, new { #class = "form-control", #rows = "1" })
</div>
Controller method:
public ActionResult GetAgreementByRevision(int revisionID)
{
Agreement revisedAgreement = new Agreement();
revisedAgreement = _agreementService.GetAgreementDetailsByRevision(revisionID);
return PartialView("AgreementDetailsFormPartial", revisedAgreement);
}
If I am not able to accomplish this, what would be my other options?

Your method in the controller returns PartialView which returns HTML content and you're trying to pass that HTML content as a value in the text area - this is not how it should work. You should return Json(revisedAgreement, JsonRequestBehavior.AllowGet); and then access this object in JavaScript.
$.get(url, { revisionID: selectedRevisionID }, function (data) {
// 'data' is your Agreement object
$('#ChangeReason').val(data.SomePropertyHere);
});

Need to persist value selected in dropdownlist in MVC View Using Angular

I am new to both MVC and AngularJs so please excuse me if this is a stupid question. I have a dropdownlist in an Asp.net MVC View that is populated using AngularJs. When the user selects a Company in the dropdown list, I use the companyId to populate an unordered list. My problem, I need to use that same selected CompanyID in another controller and C# method. I have found some info on saving data in a service to reuse it, but I'm not sure if that is what I really need here (or if there is a simpler way to do it than creating a service), but if it is, I don't know how to save the value in a service.
Here is my View code:
{{company.vchCompanyName}}
Current Dashboard Modules:
{{m.vchRankingWidgetModuleHeaderText}}
Here is my Angular Controller code:
myApp.controller("CompanyController",
function($scope, $timeout, companyService)
{
getCompanies();
function getCompanies() {
companyService.getCompanies()
.success(function (data) {
$scope.companies = data;
})
.error(function (error) {
$scope.status = 'Unable to load customer data: ' + error.message;
});
};
$scope.getCurrentModules = function(){
companyId = $scope.company;
companyService.getCurrentModules(companyId)
.success(function (newdata){
$scope.currentModules = newdata;
});
}
});
Here is my Angular Service:
angular.module('dashboardManagement')
.service('companyService', ['$http', function ($http) {
this.getCompanies = function () {
return $http.get('/Home/GetAllCompanies');
};
this.getCurrentModules = function (id) {
return $http.get('/Home/GetCurrentModules?companyId=' + id);
};
}
]);
Any assistance is greatly appreciated!
I tried using the Service but I cannot get it to work. I need to show Business Units for a company if the Business Units checkbox is checked. I put the function "getBusinessUnits" on the ng-checked and tried to use the service to retrieve the CompanyID. My View looks like this:
<div ng-controller="BusinessUnitsController">
<input id="ckBusinessUnit" type="checkbox" ng-checked="getBusinessUnits()"/>Exclude by Business Units<br />
<ul>
<li ng-repeat="unit in businessUnits">{{unit.Description}}</li>
</ul>
</div>
My Controller looks like this:
myApp.controller("BusinessUnitsController",
function ($scope, $timeout, companyService) {
$scope.getBusinessUnits = function () {
companyId = companyService.selectedCompanyId;
companyService.getBusinessUnits(companyId)
.success(function (data) {
$scope.businessUnits = data;
});
};
});
The code in the Service is exactly as you suggested:
angular.module('dashboardManagement')
.service('companyService', [
'$http', function ($http) {
this.selectedCompanyId = null;
this.getCompanies = function () {
return $http.get('/Home/GetAllCompanies');
};
this.getCurrentModules = function (companyId) {
this.selectedCompanyId = companyId;
return $http.get('/Home/GetCurrentModules?companyId=' + companyId);
};
this.getBusinessUnits = function (companyId) {
return $http.get('/Home/GetBusinessUnits?companyId=' + companyId);
}
}
]);
I'm obviously missing something.

The CompanyService can be used to stock a selectedCompanyId as a property.
angular.module('dashboardManagement')
.service('companyService', ['$http', function ($http) {
this.selectedCompanyId = null;
this.getCompanies = function () {
return $http.get('/Home/GetAllCompanies');
};
this.getCurrentModules = function (companyId) {
this.selectedCompanyId = companyId;
return $http.get('/Home/GetCurrentModules?companyId=' + companyId);
};
}]);
Then you can access the selectedCompanyId everywhere in your others controller/directive by injecting companyService.
Note that it is like a Singleton with a single instance, so you can have only one selected company for your whole angular application.

if I understand well you need to save the select companyId in your View and then pass it to your controller(c#) right?
try this, add a new property in your angularjs controller
$scope.SelectedCompanyId = '';
then in your dropdownlist add this attribute
ng-model="SelectedCompanyId"
then add a new hidden input
<input type="hidden" name="CompanyId" value="{{SelectedCompanyId}}" />
now if in the model that are you using in your view have a property CompanyId, when you do the post back it will map the value, or just in your controller add a new parameter
[HttpPost]
public ActionResult YourActionName(YourModel model, int? CompanyId)
{
//you can access to the CompanyId
//int? CompanyId --> this is only if your model doesn't have a property called CompanyId
}

How to return a dynamic number of multiple partial views inside another partial view

I want to return a dynamic number of multiple partial views inside another partial view in the controller, and inject it to the DOM using an Ajax call.
The user is going to select a package (radio buttons) and depending on this package I need to return X number of forms to be filled by the user.
This is my Ajax code:
$(function() {
var serviceURL = "/NewOrderRequestForms/GetFormsToCreateNewOrderRequest";
$(":radio").change(function() {
$.ajax({
url: serviceURL,
type: "POST",
data: { account: $("#AccountId").val(), serviceAvailabilityPackageId: $(":radio:checked").val() },
success: function(xhrData) {
populateNORForms(xhrData);
},
error: function() {
alert("error");
}
});
});
});
My controller method looks like the following:
public virtual ActionResult GetFormsToCreateNewOrderRequest(Guid account, int serviceAvailabilityPackageId)
{
var customerNumber = _authorizationUtil.GetAccount(account).CustomerNumber;
var result = _customFormService.GetFormsToCreateNewOrderRequest(customerNumber.Value,
serviceAvailabilityPackageId).Select(x => x.FormKey);
var forms = CustomFormUtil.GetCustomMetaPartial(result);
//I am confused here
//return PartialView(something)
}
CustomFormUtil.GetCustomMetaPartial(result) is going to return an IEnumerable<string> of 1 to 6 strings for example "form1, form3" or "form1, form2, form3, form6" etc. I am using this to return a Dictionary of View names and Models to add them in my ultimate partial view.
//Dictionary for Custom Meta Partialviews
public static Dictionary<string, CustomMetaPartialViewModel> CustomMetaPartial2 = new Dictionary<string, CustomMetaPartialViewModel>()
{
{"form1_v1", new CustomMetaPartialViewModel(MVC.Service.NewOrderRequestForms.Views.form1_v1, new form1_v1())},
{"form2_v1", new CustomMetaPartialViewModel(MVC.Service.NewOrderRequestForms.Views._form2_v1,new form2_v1())},
...
{"form7_v1", new CustomMetaPartialViewModel(MVC.Service.NewOrderRequestForms.Views._form7_v1,new form7_v1())}
};
My question is: how can I add these partial Views with Models into another big partial view and send this one back to the View?

Ok, I have my answer for this, instead of using Ajax to call the List of string I am using to create a PartialView that renders everything I need.
This is my AJAX call
$(function () {
var serviceURL = "/NewOrderRequestForms/GetFormsToCreateNewOrderRequest";
$(":radio").change(function () {
$.ajax({
url: serviceURL,
type: "POST",
data: { account: $("#AccountId").val(), serviceAvailabilityPackageId: $(":radio:checked").val() },
success: function (xhrData) {
$('#NORForms').html(xhrData);
},
error: function () {
alert("error");
}
});
});
});
And the function in the controller is the following:
public virtual ActionResult GetFormsToCreateNewOrderRequest(Guid account, int serviceAvailabilityPackageId)
{
var customerNumber = _authorizationUtil.GetAccount(account).CustomerNumber;
var result = _customFormService.GetFormsToCreateNewOrderRequest(customerNumber.Value,
serviceAvailabilityPackageId).Select(x => x.FormKey);
return PartialView(Views.GenericParentView, result);
}
I am getting all the information I need from the View, however, instead of returning a List of Strings to the callback in Ajax, I am returning a PartialView having the list of Strings that I needed as the parameter that I need to render the partials Views. Here is the new Partial View that handles this.
#using UI.Shared.Utils
#model IEnumerable<string>
#{
var forms = CustomFormUtil.GetCustomMetaPartial2(Model);
var result = forms.Select(x => x.Model);
}
#using (Html.BeginForm(MVC.Service.NewOrderRequest.Index(new TdlMasterModel()), FormMethod.Post))
{
foreach (var form in forms)
{
{ Html.RenderPartial(form.View, form.Model); }
}
<p style="clear: both">
<input id="submitNOR" type="submit" value="Submit" style="float: right" />
</p>
}
I am sending a list of Strings, and using it to spit out a Dictionary with Model,Views and I am rendering them in the partial view, using a foreach loop.
Saving me at the end some extra Ajax calls, in resume I was tackling my problem the wrong way.

Drop down list at layout page - MVC

My problem: drop down list at layout page.
I've read this post: ASP.NET MVC Razor pass model to layout it's more or less similar to my problem.
In one of comments Mattias Jakobsson wrote that: "But a common solution is to use RenderAction to render parts that need their own data in the layout page".
So ok I've created layout page with #Html.Action() that render my drop dwon list with a date from the db. Everything's perfect. But...
I have two pages, for example: 'Home', 'About' and my drop down list (ddl) at layout page
How to achive that when I'm at 'Home' and I changed selection in ddl it refresh 'Home' page and when I'm at 'About' it refresh 'About' page.
How to store selected ddl value through pages?
Part of Layout.cshtml code:
.
.
<body>
<header id="top" class="grid-full-margin">
<strong id="logo" class="grid-304"><img src="/images/logo.png" ></strong>
#Html.ActionLink(#Resources.Resource.BackToIntranet, "Index", "Home", null, new {#class = "link link-home grid-position-left"})
<h1>#Resources.Resource.SiteTitle</h1>
#Resources.Resource.LayoutHelp
<nav clss="grid-896">
<ul>
<li>#Html.ActionLink(Resources.Resource.LayoutMenuItem1, "Index", "Home")</li>
<li>#Html.ActionLink(Resources.Resource.LayoutMenuItem2, "Index", "ClimaticStation")</li>
<li>#Html.ActionLink(Resources.Resource.LayoutMenuItem3, "Index", "ClimaticPoint")</li>
<li>#Html.ActionLink(Resources.Resource.LayoutMenuItem4, "Index", "IcewaterExchanger")</li>
<li>#Html.ActionLink(Resources.Resource.LayoutMenuItem5, "Index", "Pipeline")
<ul>
<li>#Html.ActionLink("Zestawienie", "YearsLength", "Pipeline")</li>
</ul>
</li>
</ul>
<div class="mod-select-list tbl-actions">
#Html.Partial("~/Views/Shared/Partials/LoginPartial.cshtml")
</div>
</nav>
</header>
<form action="#">
#Html.Action("VariantsDdl", "MyBase")
</form>
#RenderBody()
.
.
Part of MyBaseController.cs
public class MyBaseController : Controller
{
[ChildActionOnly]
public ActionResult VariantsDdl()
{
var dataFromDb = GetDataFromDB(); // it's not importstn right now
return this.PartialView("~/Views/Shared/Partials/VariantsDdlPartial.cshtml", dataFromDb);
}
.
.
}
Regards,
Marcin

ok I've managed to solve this problem and I want to know your opinion abut my solution.
_Layout.cshtml looks the same way like at first post, so belowe is only most important part for this question (drop down list at layout)
<div style="float: right;">
#Html.Action("VariantsDdl", "MyBase")
</div>
Action: VariantsDdl is implemented at MyBaseController. This action loads selected variant id from session or if it's null then from web.config (in this situation it's project requirement that at least one variant must be present at db and its id must be specified in config):
[ChildActionOnly]
public ActionResult VariantsDdl()
{
long defaultVariantID;
long.TryParse(System.Configuration.ConfigurationManager.AppSettings["DefaultVariantId"], out defaultVariantID);
if (System.Web.HttpContext.Current.Session["mySelectedVariant"] != null)
{
long.TryParse(System.Web.HttpContext.Current.Session["mySelectedVariant"].ToString(), out defaultVariantID);
}
var variants = this.db.warianties.ToList();
var items = new List<SelectListItem>();
foreach (var variant in variants)
{
var selectedItem = false;
if(variant.id == defaultVariantID)
{
selectedItem = true;
}
items.Add(new SelectListItem { Selected = selectedItem, Text = variant.nazwa, Value = variant.id.ToString() });
}
return this.PartialView("~/Views/Shared/Partials/VariantsDdlPartial.cshtml", items);
}
Partial view and post action that stores selected variant id to session:
#model IEnumerable<SelectListItem>
<label for="field">Current variant</label>
#Html.DropDownList("Varaints", Model, new { id = "variantsDdl" })
<script type="text/javascript">
$(function () {
$('#variantsDdl').change(function () {
var val = $('#variantsDdl').val()
$.ajax({
type: "POST",
url: '#Url.Action("ChangeVariant", "MyBase")' + '/' + val,
success: function (result) {
location.reload();
},
error: function (data) { alert('Error'); }
});
});
});
Partial View post action 'ChangeVariant', saves selected variant id to session:
[HttpPost]
public ActionResult ChangeVariant(long id = 0)
{
System.Web.HttpContext.Current.Session["mySelectedVariant"] = id;
return null;
}
This is solution for my requirements:
1. DDL at layout
2. Refresh current page at DDL 'onchange'
3. Keep selected DDL value through pages
Please comment if it's appropriate solution or maybe should I go different way?
Regards,
Marcin

How to replace div's content by partial view or update it's content depending on what json result returns on ajax complete?

Well I have simple ajax form:
This is MyPartialView
#using(Ajax.BeginForm("action", "controller", new AjaxOptions
{
OnBegin = "beginRequest",
OnComplete = "completeRequest",
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "div-to-replace"
}, }))
{
<input type="text" id="my-input" />
...
}
This is parent view:
<div id="div-to-replace">
#Html.RenderPartial("MyPartialView")
</div>
In my controller I have:
[HttpPost]
public ActionResult action(Model model)
{
if (ModelState.IsValid)
{
// do staff with model
// return partial view
return PartialView("MyPartialView");
}
// else add error and return json result
return Json(new {error = "invalid data"});
}
And my javascript on ajax complete method:
function completeRequest(data) {
var result = $.parseJSON(data.responseText);
if (result != 'undefined' && result != null && result.error) {
// just display error and not replace all content
// attachModelError is my custom method, it just adds vlaidation-error class to inputs, etc.
attachModelError("my-input", result.error);
return;
}
// or show returned html (depending on returned model form inputs will be modified:
// select box with different items in my case
$('#div-to-replace').html(data.responseText);
}
But the problem is I have empty #div-to-replace if model state is invalid. If model state is ok every thing works fine. If I use different insertion mode it creates duplicates of div's content before or after div.
Summary:
I want different InsertionMode behavior depending on json result. I don't need replace data if (result != 'undefined' && result != null && result.error).

I had to solve this problem once so very long ago. I came up with a simple solution, which today, may not be the best solution but it gets the job done.
My solution involved setting up a controller action that would render just the partial with data that it would need and have my JavaScript request it.
C#
MyController: Controller
{
public ActionResult GetPartialViewAction()
{
return PartialView("mypartialview", new partialViewModel());
}
}
JavaScript
$.ajax({
url: "/my/getpartialaction/"
}).done(function(data) {
$("#partialViewDiv").html(data);
});
HTML
<div id="partialViewDiv"></div>
A better solution would be to use a MVVM/MVC JavaScript library that would allow you to leverage html templates and only have to transmit the data over your ajax solution. I recommend looking into knockout.js or backbone.js for this more accepted pattern.

I have the same problem with the default c# ajax forms. I have a solution what might work.
jQuery:
$(function () {
var ajaxFormSubmit = function () {
var $form = $(this);
var options = {
url: $form.attr("action"),
type: $form.attr("method"),
data: $form.serialize(),
cache: false
}
$.ajax(options).done(function (data) {
data.replaces.each(function (replace) {
$(replace.id).replaceWith(replace.html);
});
});
return false;
};
$("form[data-ajax='true']").submit(ajaxFormSubmit);});
form.cshtml
#using (Html.BeginForm("Create", "Menu", FormMethod.Post, new { data_ajax = "true" }))
{}
model sample
public string Id {get;set;}
public string Html {get;set;}
The last thing you need to do in your controller is return a json result with a list of your model sample, id is target element to update, for the html you must use a render partial / or view as string.
For render view to partial see [question]: https://stackoverflow.com/questions/434453