X-editable与ASP MVC视图，如何将提交的表单POST动作提交给控制器

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.

我使用X-Editable插件捕获用户输入，并执行提交到服务器。我在提交时收到一个错误，我应该更改什么以使x-editable数据与表单一起工作。

1. Do I change the Controller (signature or attribute?), or the Javascript AJAX arguments to get past the submission?
2. 我是否更改了控制器(签名或属性?)，或者Javascript AJAX参数以通过提交?
3. 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.
4. 对于某些场景，当用户离开时，如何自动检测内联的、X-editable texbox中的更改以立即执行post。
5. What would I need to change in the Javascript to make it work with a partial view
6. 我需要在Javascript中修改什么才能使它与部分视图一起工作
7. Would it enhance my solution if I were to encapsulate the HTML in a form, and use the user button submission
8. 如果我将HTML封装在表单中并使用user按钮提交，这会增强我的解决方案吗

Javascript:

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();
}

1 个解决方案

#1

This seemed to work for me ...

这似乎对我有用……

Javascript ...

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) ...

标记(使用多个x-editable控件创建表主体)……

                        <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>