MVC值后使用Ajax时在DropDownList中选定的值 [英] MVC Post values using ajax when value selected in dropdownlist

问题描述

我有几个dropdownlists的形式。每次用户选择的这些的dropdownlist做我想要的值被保存到后端（数据库）之一的一个值。我不想重新加载页面，所以我想才达到这与阿贾克斯的最佳方式，而这正是我需要帮助。

我将如何去得到它的全自动张贴值到服务器端的时候我选择在DropDownList中的值。我应该让1形式，每个下拉列表中这样我就可以单独对其进行更新？我如何得到它后的值作为Ajax调用，而不是重新加载页面？我使用jQuery和jQuery Mobile的ontop ASP MVC的。

有关演示目的，让我表现出一定的code因为这将是现在： 视图模型：

 公共类ColorViewModel
{
    公共ColorViewModel（）
    {
        选项​​=新的名单，其中，串＆GT;（）{红，蓝，绿};
    }

    公共字符串值{获得;组; }

    公开名单＆LT;字符串＆GT;选项​​{获得;组; }
}
 

查看：

  @model IEnumerable的＆LT; ColorViewModel＆GT;

@using（Html.BeginForm（））
{
    的foreach（在模型的VaR项）
    {
        Html.DropDownListFor（米=＆GT; m.Value，Model.Options）
    }
    ＆LT;输入类型=提交值=保存＆GT;
}
 

我想删除从表单提交按钮，并尽一切形式的submiting的，当用户选择一个值（我想这可以通过使用JavaScript来achived）

解决方案

我最终没有张贴的形式，而是每张贴的选择输入时，他们改变

。我必须附上所有我需要使用的值的元素的数据 - 属性张贴。例如，如果你想有一个ID连接到它：

  @ Html.DropDownListFor（M =＆GT; m.Value，Model.Options，新{@data_Id = Model.Id，}）
 

使用jQuery那么你就能够做到这一点是这样的：

  $（函数（）{
    $（'下拉'）。改变（函数（）{
        $阿贾克斯（
            {
                键入：POST，
                网址：控制器/动作，
                数据： {
                    价值：$（本）.VAL（）
                    编号：$（本）.attr（数据标识），
                }
            }）;
    }）;
}）;
 

现在将发布到URL spesified。如果你有相同的属性名作为您发布的数据将是全自动填写正确的值到这些的一个对象。

另外一个小纸条。如果你想要去与发布整个表格的另一种方法（像我一样第一次）必须在隐藏提交按钮，然后触发其click事件的JavaScript它使用Ajax。只需用JavaScript submiting的形式，通常会的形式通常提交，而不是使用AJAX。

I have several dropdownlists in a form. Each time the user selects a value in one of these dropdownlist do I want the value to be saved to the backend (database). I don't want to page to reload so I guess the best way to achive this is with ajax, and this is what I need help with.

How would I go about to get it to automaticly post the value to the server side when I select a value in a dropdownlist. Should I make 1 form for each of the drop down lists so I can update them individually? How do I get it to post the value as a ajax call, and not with a page reload? I'm using JQuery and JQuery mobile ontop of ASP MVC.

For demonstration purpose let me make show some code as it would be now: ViewModel:

public class ColorViewModel
{
    public ColorViewModel()
    {
        Options = new List<string>(){ "red", "blue", "green" };
    }

    public string Value { get; set; }

    public List<string> Options { get; set; }
}

View:

@model IEnumerable<ColorViewModel>

@using (Html.BeginForm())
{
    foreach(var item in Model)
    {
        Html.DropDownListFor(m => m.Value, Model.Options)
    }
    <input type="submit" value="Save">
}

I want to remove the submit button from the form and do all of the submiting of the form when the user selects a value (I guess this can be achived by using javascript)

解决方案

I ended up not posting the form but posting each of the select inputs when they change. I had to attach all the values I needed using "data-" attribute on the element posted. For example if you want a ID attached to it:

@Html.DropDownListFor(m => m.Value, Model.Options, new { @data_Id = Model.Id, })

Using jQuery then you're able to do it this way:

$(function() {
    $('.dropdown').change(function() {
        $.ajax(
            {
                type: "POST",
                url: "Controller/Action",
                data: {
                    Value: $(this).val(),
                    Id: $(this).attr('data-Id'),
                }
            });
    });
});

It will now be posted to the url spesified. If you have a object with the same property name as the one you're posting in the data will it automaticly fill the correct values into these.

Another small note. If you want to go for the other approach with posting the whole form (as I did first) must you hide the submit button then trigger its click event with javascript for it to use ajax. Just submiting the form normally with javascript will the form be submitted normally and not using ajax.

这篇关于MVC值后使用Ajax时在DropDownList中选定的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！