Develop Reference

Refreshing multiple partial views in ASP.NET MVC

Thanks in advance.
I am working on a product filter view similar to some thing like on amazon. where I have refresh multiple views but the data for all the partial view come from single ajax call how to refresh multiple partial view. I can refresh main content area completely but some partial views are not supposed to be refreshed.

I broke it down into steps so you can follow/modify and add your partials like here. First, add 3 Partial Views, they have the same code like below,
#model int
<div class="container fluid">
<h1>PartialDemo#(Model)</h1>
<h3>The views will all update when you click update button below</h3>
</div>
DashboardWidgets.cshtml, the code like below, whatever your csthml page is
//<div class="row-fluid">
// <div class="col">
<div id="WidgetID_1" class="container">
#Html.Partial("_PartialWidget1", 1)
</div>
<div id="WidgetID_2" class="container">
#Html.Partial("_PartialWidget2", 2)
</div>
<div id="WidgetID_3" class="container">
#Html.Partial("_PartialWidget3", 3)
</div>
<div id="WidgetID_4" class="container">
#Html.Partial("_PartialWidget3", 4)
</div>
//</div> // the col
//</div> // the row
// lcik below button to update the partials above
// ***** One button will update them all like you wanted
<button type="button" onclick="UpdateMyWidgets()" class="btn btn-primary">Update All Partial View Views</button>
#section scripts{
<script type="text/javascript">
// this one button will update all your partials/widgets, you can add more partials in this function and just copy paste.
function UpdateMyWidgets() {
$.ajax({
url: "#Url.Action("Widget1")", // whom to call
type: "POST",
datatype: "HTML",
success: function (data) {
$("#WidgetID_1").html(data); // tell it which div to append on return
}
})
$.ajax({
url: "#Url.Action("Widget2")",
type: "POST",
datatype: "HTML",
success: function (data) {
$("#WidgetID_2").html(data);
}
});
$.ajax({
url: "#Url.Action("Widget3")",
type: "POST",
datatype: "HTML",
success: function (data) {
$("#WidgetID_3").html(data);
}
});
}
</script>
}
When click the "Update All Partial View Views" button, it will call "Update" method. If success, the return data will replace div's content
Backend action ajax request.
// these actions get called from the Update Buttons
public ActionResult Widget1()
{
return PartialView("_PartialWidget1", 11);
}
public ActionResult Widget2()
{
return PartialView("_PartialWidget2", 21);
}
public ActionResult Widget3()
{
return PartialView("_PartialWidget3", 31);
}

Changing the value of a bootstrap component dynamically

I am trying to change the value within a bootstrap component that will change on a button click event
Here is my component. It is a small bar that fills to a certain percentage depending on what value has been entered in through the markup code
<div class="progress">
<div id="theprogressbar" class ="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"
style="width: 95%">
<span class="sr-only">95% Complete</span>
</div>
</div>
style="width: 95%" is what is needed to be changed in order to change the percentage that the bar is filled with. Here is an example of what the bootstrap component looks like
How would I go about changing the percentage value within a button click event? thanks in advance and sorry if I seem vague! c# is the coding language I am using and this is taking place on a web form
UPDATE: JQUERY CODE
<script>
$('#btnSave').click(function () {
$.ajax({
url: 'http://localhost:61417/ProjectMainMenu/GetProgress',
method: 'POST',
contentType: 'application/json',
success: function(response){
var progressValue=response.d;
$('#theprogressbar').attr('aria-valuenow', progressValue).css('width',progressValue);
$("#progressValue").text(progressValue);
}
});
</script>
C# CODE
[WebMethod]
public static double GetProgress()
{
double progress=0;
//Your Business Logic
progress=56;
return progress;
}
BUTTON MARKUP CODE
<asp:Button ID="btnSave" width =" 250px" runat="server" Text="View" class="btn btn-info" />

you need to use WebMethod attribute which work as a web service method.
HTML & Jquery
<div class="progress">
<div id="theprogressbar" class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%">
<span class="sr-only"><span id="progressValue">95</span>% Complete</span>
</div>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
<script>
$(document).ready(function(){
$('#btnSave').click(function () {
$.ajax({
url: 'http://localhost:56894/Progress.aspx/GetProgress',
method: 'POST',
contentType: 'application/json',
success: function(response){
var progressValue=response.d;
$('#theprogressbar').attr('aria-valuenow', progressValue).css('width',progressValue);
$("#progressValue").text(progressValue);
}
});
});
</script>
ASP.NET Web Form
[WebMethod]
public static double GetProgress()
{
double progress=0;
//Your Business Logic
progress=56;
return progress;
}
Javascript

Jquery Autocomplete not working after postback

In MVC 4, I have a textbox with Autocomplete functionality in a partial view And i am using this partial view in two views,view 1 and View 2.In View 1 ,it is working fine, as view 1 does not have any postback, while in View 2, i have a submit button causing postback,and after this postback,the partial is shown on the screen or else it is hidden.The Autocomplete here is not working.
$("#txtProduct").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
data: { term: request.term },
datatype: JSON,
url: 'UploadEligibilityCodes/GetAllMatchingProducts',
success: function (data) {
response($.map(data, function (value, key) {
return {
label: value.ProductName.concat("(", value.ProductId, ")"),
value: value.ProductName,
pid: value.ProductId
};
}))
}
});
},
select: function (event, ui) {
$('#hdnProductIdSearch').val(ui.item.pid);
}
});
This is the code of my text box defined in Partial view named SearchFilters.cshtml and View 2 which uses this partial view as follows.
#using (Html.BeginForm( "Validate","UploadEligibilityCodes",FormMethod.Post, new {id="UploadForm" , enctype = "multipart/form-data" }))
{
<div class="col-sm-1 form-group">
<button type="submit" class="SIMPLDocumentUploadSave" id="importbtn" value="Import" style="width: 100px"> Import</button>
</div>
}
<div class="col-sm-12 form-group SIMPLAdvancedFilterOptions">
#Html.Partial("SearchFilters")
</div>
I saw some examples using Sys.WebForms.PageRequestManager in ASP.Net, but the same i am not able to apply it html of mvc application.Please help :)

Can you replace your submit button with regular one and call submit() on form manually with jQuery? This can help you with postback issue

Submitting a cshtml form using ajax

#{
var db = Database.Open("CMS");
//retrieving the username of the user from the session
var session_username = Session["session_username"];
//get the details of the user from the database
var getuserdetailscommand = "SELECT * from student where student_username = #0";
var getuserdetailsdata = db.Query(getuserdetailscommand, session_username);
var statusfirstname = "";
var statuslastname = "";
var statusavatar = "";
foreach(var row in getuserdetailsdata){
statusfirstname = row.student_firstname;
statuslastname = row.student_lastname;
statusavatar = row.student_avatar;
}
//on submit execute the following queries
if(IsPost){
if(Request["button"] == "sharestatus"){
//retrieve the data from the form input fields
var statusbody = Request.Form["statusbody"];
var statususername = session_username;
//insert the status for the username into the database
var insertcommand = "INSERT into status(status_body, status_date, status_username, status_firstname, status_lastname, status_avatar) VALUES (#0, #1, #2, #3, #4, #5)";
db.Execute(insertcommand, statusbody, DateTime.Now, session_username, statusfirstname, statuslastname, statusavatar);
}
}
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function get() {
$.post('statusupdateform.cshtml', { name: form.name.value }
}
</script>
<form class="status-form" role="form" action="" enctype="multipart/form-data" method="post" name="form">
<div class="form-body">
<div class="form-group">
<textarea class="form-control" placeholder="What's on your mind?" name="statusbody"></textarea>
</div>
</div>
<div class="form-footer">
<div class="pull-right actions">
<button class="btn btn-primary" name="button" value="sharestatus" onclick="event.preventDefault();get();return false;">Share</button>
</div>
</div>
</form>
This is the code in my cshtml file. I want to submit the form using ajax so that the whole page doesn't get refreshed everytime a user submits anything.
The C# code necessary to run the form is also provided in the code.
Any help how can I submit the for using ajax?
Thank you!

Use Javascript or JQuery for this.
E.g. add script tag with link to jquery code file and then use $.get or $.post to make ajax call.

You should remove
method="post"
From the form as this will make the full page submit. Also you can find more information on how to do this in the Jquery documentation.
See the bottom of this link for an example:
http://api.jquery.com/jquery.post/

Use This to perform your operations
$.ajax
({
url: " URL",
data: "{ 'name' : 'DATA'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
async: true,
dataFilter: function (data) { return data; },
success: function (data)
{
alert(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error");
}
});

Client side validation using Data Annotations

I am having a problem using client side validation in combination with Data Annotations.
The project is using ASP.NET Framework 4.5, a Web Application with the MVP pattern and jQuery Ajax calls to dynamically load user controls.
This is the (stripped) user control which contains the input element that needs to be validated:
<form id="insertArtist" class="form-horizontal">
<fieldset>
<legend>Add new artist</legend>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<asp:TextBox runat="server" ID="name" ClientIDMode="Static" CssClass="input-medium"></asp:TextBox>
<ml:DataAnnotationValidator runat="server" ID="davName" ControlToValidate="name" EnableClientScript="true" PropertyToValidate="Name" SourceTypeName="Music.Library.Domain.Models.Artist, Music.Library.Domain">
</ml:DataAnnotationValidator>
</div>
<div class="form-actions">
<button id="save" class="btn btn-primary" name="submit" type="submit">Save</button>
<button id="cancel" class="btn">Cancel</button>
</div>
</div>
</form>
This user control get's dynamically loaded using the following ajax call:
$('#add').click(function () {
$.ajax({
url: "/Artist/Manage/Insert.ascx.axd",
type: "POST",
dataType: "html",
success: function (obj) {
$('#body_artist').html($(obj));
}
});
});
This is the jquery executed when a user clicks save:
$('#save').click(function (event) {
event.preventDefault();
$.ajax({
url: "/artist/add.axd",
type: "POST",
dataType: "html",
cache: false,
async: true,
data: 'Ajax=true&' + $('#insertArtist').serialize(),
beforeSend: function (jqXHR, settings) {
$('#loading').show();
},
success: function (data) {
if (data == "succes") {
showNotification('succes', 'Succesfully added artist');
} else {
showNotification('error', 'Error while adding artist: ' + data);
}
},
error: function (jqXHR, textStatus, errorThrown) {
showNotification('error', 'Error while adding artist: ' + data);
},
complete: function () {
$('#loading').hide();
}
});
});
Now, since there is no trigger from an asp.net control the custom data annotation validator will not validate.
I've tried validating using Javascript, using the Page_ClientValidate(), ValidateEnable() and Validate() methods. Unfortunately when trying this I keep getting the same error over and over:
Page_ClientValidate is not defined
Same story for the other methods.
I'm at wits end here.
Is it because the UserControl is dynamically loaded that these client validation methods do not work? I've set EnableClientScript to true.
Or does anyone have another idea on how to implement this? I'd really like to use the Data Annotations.
Thanks in advance!

It can be a solution
http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/
Especially, it is a dublicate of this question Unobtrusive validation not working on dynamically-added partial view which also refers to XHalent blog