current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I want to change the value of an enumdropdownlist from active to inactive in my database by doing some ajax call WITHOUT refreshing my page? How do I do this? javascript method or ajax.beginform? not sure here...

I tried ajax.beginform and the call gets made the to the controller ok, but then it tries to refresh/render a view by returning it as a actionresult. I don't want it to refresh the view because I loose my viewmodel data. I thought ajax.beginform only refreshed what was inside the form? Do I need to perform this in a javascript method instead? What do I do to prevent a view from being refreshed/rendered in my action method?

here is my ajax form. If I return a view I loose all the 'Model' view data, so model.statusenabled is null! I don't understand why its null because it's outside of the ajaxform...

@if (Model.StatusEnabled)
      {
          using (Ajax.BeginForm("UpdateStatus", "Student", new AjaxOptions
          {
              HttpMethod = "post",
              OnSuccess = "dotcolor();"
          }))
          {
              @Html.EnumDropDownListFor(model => model.Status, new { @class = "btn btn-default btn-lg dropdown-toggle", onchange = "this.form.submit();", id = "enumstatus" })
          }
      }
      else
      {
         @Html.EnumDropDownListFor(model => model.Status, new { @class = "btn btn-default btn-lg dropdown-toggle", disabled = "disabled" })
      }

here is my action method

    [HttpPost]
    public ActionResult UpdateStatus()
    {
        //update database
        // don't return view because it gets refreshed
        // and I have to re pass in my viewmodel
        return View("Edit"); 
    }

if I change the return type to void in UpdateStatus() it still attemptsto return a view called UpdateStatus. Not what I want.

share|improve this question
    
It sounds to me like you should be using WebAPI and not regular MVC controllers/actions. –  Rowan Freeman Feb 18 at 23:24
    
should I be doing this in just a javascript method then? I'm not using webapi in my project. –  user1186050 Feb 18 at 23:34
    
Ajax.BeginForm refreshes (replaces, perpends or appends) the contents of the element to specify in the UpdateTargetId of the AjaxOptions (which you have not specified). But you if block does not make sense - the else statement renders a <select> outside the form - which makes me think all this is enclosed in another form element (nested forms are invalid and not supported) –  Stephen Muecke Feb 18 at 23:34
    
no this isn't nested inside any other form. I intentionally removed it from another form so it was independent. I don't need to replace/perpend/append anything in the form, I just need to update the database without refreshing the screen. Should this be in a javascript method using ajax inside it instead of a ajax.beginform? –  user1186050 Feb 18 at 23:35
    
Are you wanting to pass the selected value of the dropdown (I assume they are "Active" and "Inactive") to a method and then update the status of the Student in the database? –  Stephen Muecke Feb 19 at 0:00

1 Answer 1

up vote 1 down vote accepted

This is relatively easy using jquery and ajax to post the selected value

Html

@Html.EnumDropDownListFor(m => m.Status, new { @class = "btn btn-default btn-lg dropdown-toggle" })

Script

var id = '@Model.ID'; // store the ID of the student (change to suit your property name)
var url = '@Url.Action("UpdateStatus", "Student")';
$('#Status').change(function() {
  var status = $(this).val();
  $.post(url, { ID: id, Status: status }, function(data) {
    // do something with the returned value e.g. display a message?
    // for example - if(data) { // OK } else { // Oops }
  }
}

Controller

[HttpPost]
public ActionResult UpdateStatus(int ID, EmployeeStatus Status) // assumes the enum is typeof EmployeeStatus 
{
  // update the employees status based on the parameters
  return Json(true); // or return Json("some message")
}

Note, you will probably want to check that the status was indeed updated, for example in a catch block you might return Json(null) or return Json("some error message") which you could then use to display a message on the page

share|improve this answer
    
so I run this in a javascript function right? Not in a ajax.beginform? –  user1186050 Feb 19 at 0:36
    
Yes, Just delete the Ajax.BeginForm stuff. Ensure you have jquery loaded and place this script inside <script> tags immediately before the closing </body> tag (or inside a $(document).ready() { function –  Stephen Muecke Feb 19 at 0:38
    
I'll give it a try thanks! –  user1186050 Feb 19 at 0:42
    
Just a side note: Its not a usual interface to have selecting an option directly call a controller, and is likely to be confusing to the user. I would recommend an additional button (say 'Update Status') and handle the button's .click event rather than the select's .change event –  Stephen Muecke Feb 19 at 0:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.