使用ASP MVC View进行X-editable，如何将提交的表单POST操作传递给控制器

Question

I am using X-Editable Plugin to capture user input, and performing submission to server. I'm getting an error on submission, what should I change to get the x-editable data working with the form.

1. Do I change the Controller (signature or attribute?), or the Javascript AJAX arguments to get past the submission?
2. for some scenarios, how do I autodetect the change in the inline, X-editable texbox to perform a post right away, when user leaves the box.
3. What would I need to change in the Javascript to make it work with a partial view
4. Would it enhance my solution if I were to encapsulate the HTML in a form, and use the user button submission

Javascript:

 $('#Application').editable({
     url: function (params) {                      
        return $.ajax({
           url: 'Application/Create',
           type: "POST",
           contentType: 'application/json; charset=utf-8',
           data: JSON.stringify(params),
           dataType: 'json',
           async: true,               
           success: function (response) {
                     alert("Success");
           },
           error: function () {
                     alert("Error in Ajax");
           }
          });
      }
});


HTML:
<!-- language: lang-html -->
<a href="#" id="Application" class="EditableApplication"></a>



<!-- language: C# -->    
[HttpPost]                            
//[Authorize]
public ActionResult Create(String params)
{
var = params;
        //Deserialize and Get params here and create application objeci
Return View();
}

Answer 1

This seemed to work for me ...

Javascript ...

   $('#searchresult a').editable({
            url: function (params) {
                var requestData = '';
                if (params.name == 'employeeno') 
                    requestData = { UserName: params.pk, EmployeeNo: params.value }
                else
                    return; //perform no update

                return $.ajax({
                        cache: false,
                        async: true,
                        type: 'POST',
                        data: requestData,
                        url: 'EASMUser/UpdateAccountProperty',
                        beforeSend: showWaitCursor('Updating EASM Account ...'),
                        success: function (response) {
                            alert("Success");
                        },
                        error: function (data) {
                            debugger;
                            alert(data);
                        }
                        });
                    }
            }
        );

Model ...

public class EASMUserViewModel
{
    public string UserName { get; set; }
    public string EmployeeNo { get; set; }
    public string Password { get; set; }
    public List<Entity> Entities {get; set;}

    /// <summary>
    /// Helper method to convert to string
    /// </summary>
    /// <returns></returns>
    public string EntitiesToString()
    {
        if (Entities == null || Entities.Count == 0)
            return string.Empty;

        StringBuilder sb = new StringBuilder(); 
        foreach( Entity pe in Entities)
        {
            string target = sb.Length > 0 ? ",{0}": "{0}";
            sb.AppendFormat(target, Convert.ToInt32(pe)); 
        }

        return sb.ToString(); 
    }

}

Controller Method ...

    [HttpPost]
    public ActionResult UpdateAccountProperty(EASMUserViewModel easmuser )
    {
        try
        {
            //using a grid with multiple x-editable controls
            if (!string.IsNullOrEmpty(easmuser.EmployeeNo))
            {
                //Updating Employeeno

                //TODO: update db

            }
            else if (!string.IsNullOrEmpty(easmuser.Password))
            {
                //Updating password

                //TODO: update db
            }

            return Content(string.Format("[{0}] updated successfully.", easmuser.UserName));
        }
        catch (Exception exc)
        {
            //TODO: Add logging

            return ThrowJsonError(exc);
        }

    }

Mark up (creating a table body with multiple x-editable controls) ...

                        <tbody>
                            @foreach (var item in Model)
                            {
                                <tr id="@item.UserName">
                                    <td>@item.UserName</td>
                                    <td><a href="#" id="employeeno" data-name="employeeno" data-type="text" data-title="Enter EmployeeNo" data-pk="@item.UserName">@item.EmployeeNo</a></td>
                                    <td><a href="#" id="password" data-type="text" data-title="Enter Password" data-pk="@item.UserName" >@item.Password</a></td>
                                    <td><a href="#" id="entities" data-type="checklist" 
                                           data-pk="@item.UserName" 
                                           data-source="[{ value: 1, text: 'Entity1' },{ value: 2, text: 'Entity2' },{ value: 3, text: 'Entity3' }, { value: 4, text: 'Entity4' },{ value: 6, text: 'Entity5' }]"
                                           data-title="Select Entities"   
                                           data-value="@item.EntitiesToString()"
                                           >
                                           </a>
                                    </td>
                                    <td>
                                        <button class="btn btn-xs btn-danger" id="@item.UserName" 
                                                data-toggle="tooltip" data-placement="left" 
                                                onclick="deleteEASMUserAccount('@item.UserName');"
                                                title="Delete @item.UserName" >
                                                    <i class="fa fa-times"></i>
                                        </button>
                                    </td>
                                </tr>
                            }

                        </tbody>

Answer 2

I know this is way old but you might find it useful if you've got similar question

VIEW

           $('#url').editable({
           url: '@Url.Action("EditProfile","Company")',
            type: 'text',
            pk: @Model.ID,
            name: 'url',
            title: 'Enter URL'
            });

CONTROLLER

public ActionResult EditProfile(FormCollection fc)
    {

        try
         {
            if (ModelState.IsValid)
            {
                Customer cust = new Customer();
                cust.ID = Convert.ToInt32(fc["pk"]);
                cust.DATE_MODIFIED = DateTime.Now;

                User user = (User)Session["currentuser"];
                cust.MODIFIEDBY = user != null ? user.ID : 0 ;

                //set values based on the x-editable complement from view
                if (fc["name"] == "companyname") cust.BUSINESSNAME = fc["value"];
                if (fc["name"] == "motto") cust.MOTTO = fc["value"];
                if (fc["name"] == "phone") cust.CONTACT_PHONE1 = fc["value"];
                if (fc["name"] == "phone1") cust.CONTACT_PHONE2 = fc["value"];
                if (fc["name"] == "url") cust.CONTACT_URL = fc["value"];
                if (fc["name"] == "about") cust.ABOUT = fc["value"];

                //update Customer Table
                new CustomerRepo().UpdateCustomer(cust);

                //return 200 OK as expected by x-editable
                return new JsonResult();

            }


           // Response.StatusCode = (int)HttpStatusCode.OK;
           // Response.SuppressFormsAuthenticationRedirect = true;
            return Json(new { status = "error", message = "Update Failed. Please try again later" });

        }
        catch(Exception ex)
        {

           // Response.StatusCode = (int)HttpStatusCode.OK;
          //  Response.SuppressFormsAuthenticationRedirect = true;
            return Json(new { status="error", message = "Update Failed. Please try again later" });
        }
    }