CODEWITHSUNDEEP
jqueryasp.net-mvc-2
RobinHood
RobinHood

Reputation: 2397

Calling JQuery From Code Behind - Any Other Solution

I am working in MVC 2.I want to call a JQuery function from my code behind (i.e. From Controller)...My JQuery function is...

<script type="text/javascript">
$(function () {
    var a = document.getElementById("HidStatus").value;
    var b = parseInt(a);
    $("#progressbar").progressbar({
        value: b,
        max: 100
    });
});


<div id="progressbar" style="height: 8px; float: left; padding: .3%; margin-right: 274px;
                        margin-left: 160px; width: 350px;">
                    </div>
                    <div id="Div1" style="float: left; margin-left: 300px; margin-right: 100px; font-weight: bold">
                        <%= Html.Hidden("HidStatus", (double)ViewData["StatusBar"])%>
                        <%= Html.Label("Status - " + Convert.ToString(ViewData["StatusBar"] + "% Completed"))%>
                    </div>

i should call this in my controller. My controller wil be...

  [AcceptVerbs(HttpVerbs.Post)]
   public ActionResult ProvideDetails(FormCollection formCollection)
  {       
    //Here i should call the JQuery Function
     return PartialView("Details", empDetails);
  }

This is my Ajax Related Part...

<% AjaxOptions ajaxOption = new AjaxOptions(); ajaxOption.UpdateTargetId = "TargetId"; using (Ajax.BeginForm("Provide", "Emp", new { }, ajaxOption, new { id = "EmpForm" })) { %> <% using (Html.BeginForm("Provide", "Emp")) {%>

<% CurrentFormMode currentMode = new CurrentFormMode(); if (ViewData["FormMode"] != null) currentMode = (CurrentFormMode)ViewData["FormMode"]; %> <%EmpDetails empDetails = new EmpDetails(); if (ViewData.ContainsKey("EmpDetails")) empDetails = (EmpDetails)ViewData["EmpDetails"]; %>

<%if (!string.IsNullOrEmpty(Html.CelloValidationMessage("SuccessMessage"))) { %>

<%} %> <%} %>

How to do this....

Upvotes: 0

Views: 1155

Answers (2)

Tx3
Tx3

Reputation: 6916

If I understand correctly.. User is doing some action, you want to do something on the server and then update progress bar to give indication to the user that something has happened.

I think you have couple of options.

Using jQuery post

You could call controller action using jQuery and then update your progress bar according to the response. Progress bar update callback function would be placed to the 'success' (see below) 

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   success: success
   dataType: dataType
});

See jQuery API documentation

Using Ajax.BeginForm

It seems that you're now using PartialView. You could use Ajax form, so that you can provide function that is called when post has been done. Ajax.BeginForm contains Success option where you can give function that is called when Post has been completed successfully. In that function you could update your progress bar.

Here is an example how to using Ajax.BeginForm

I hope that this will give an idea how to implement proper solution.

Upvotes: 0

Alan Geleynse
Alan Geleynse

Reputation: 25139

The code behind is run on the server. When it is run, the page has not yet been delivered to the user and has not been rendered in their browser.

This means that when you cannot access the jQuery code since it is run only on the client.

Even if it could be run, you would not be able to use document.getElementById since it gets an element in the webpage, which has not yet been rendered.

Upvotes: 2

Related Questions