使用jQuery刷新ASP.NET MVC 2中的ListBox

时间:2011-01-12 18:45:18

标签: asp.net-mvc-2 jquery

我已经环顾四周,看看以前是否曾经问过这个问题而且找不到任何东西(所以如果之前确实有问题我会道歉。

这是我正在尝试做的事情,用户可以从他们的个人资料的技能列表中进行选择,如果他们想要的技能不在列表中,那么他们可以将它添加到数据库中,我已经完成了WCF& jQuery AJAX。这是代码:

$("#AddNewSkill").click(function () {
    $("#AddNewSkill").attr("disabled", true);
    $("#newSkill").attr("disabled", true);
    var newSkill = $("#newSkill").val();
    var data = { name: $("#newSkill").val(), description: "", type: "Skill" };
    data = JSON.stringify(data)
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "../WeddingPhotographerService.svc/AddNew",
        data: data,
        dataType: "json",
        success: function () {
            successCall('#newSkill', '#AddNewSkill');
            //$('#SkillListViewContainer').load('../Account/GetSkillControl');
        },
        error: function (msg) {
            $("#AddSkillError").text(msg.d);
            $("#AddSkill").attr("disabled", false);
            $("#NewSkill").attr("disabled", false);
        }
    });
});

以下是支持AJAX的WCF服务中的方法:

[OperationContract]
public bool AddNew(string name, string description, string type)
{
    switch (type)
    {
        case "":
            goto default;
        case "skill":
            IRepository<Skill> skillRepo = ObjectFactory.GetInstance<IRepository<Skill>>();
            var skill = new Skill { Name = name, Description = (string.IsNullOrEmpty(description)) ? string.Empty : description };
            skillRepo.Save(skill);
            return true;
        case "equipment":
            IRepository<Equipment> eqRep = ObjectFactory.GetInstance<IRepository<Equipment>>();
            var eq = new Equipment { Name = name, Description = (string.IsNullOrEmpty(description)) ? string.Empty : description };
            eqRep.Save(eq);
            return true;
        case "occasion":
            IRepository<Occassion> occRepo = ObjectFactory.GetInstance<IRepository<Occassion>>();
            var oc = new Occassion { Name = name, Description = (string.IsNullOrEmpty(description)) ? string.Empty : description };
            occRepo.Save(oc);
            return true;
        default:
            IRepository<Skill> repo = ObjectFactory.GetInstance<IRepository<Skill>>();
            var s = new Skill { Name = name, Description = (string.IsNullOrEmpty(description)) ? string.Empty : description };
            repo.Save(s);
            return true;
    }
}

这有点难看但是我会在第二部分工作后对其进行优化。以下是在视图中加载ListBox的方法:

<%: Html.ListBox("Skills", Model.SkillList, new { @style = "width:157px; height:90px;background:#e2f0f1;", @size = "3", @class = "inputbox" })%>

来自 RegistrationModelView.cs ,这是模型视图中的 SkillList

private MultiSelectList GetSkills(string[] selectedValues)
{
    List<Skill> list = new List<Skill>();
    IRepository<Skill> skills = ObjectFactory.GetInstance<IRepository<Skill>>();

    foreach (Skill skill in skills.GetAll())
    {
        list.Add(new Skill()
        {
            Key = skill.Key,
            Name = skill.Name,
            Description = ""
        });                
    }
    return new MultiSelectList(list, "Key", "Name", selectedValues);
}

加载视图的 AccountController.cs 中的操作

[MoveFormsScript]
public ActionResult Index()
{
    return View(new RegistrationModelView());
}

我非常确定我发布的所有代码(除了如何使用WCF服务添加新项目以及用于使用所述服务的jQuery是无关紧要的,但我认为我会提供尽可能多的信息)。< / p>

就像我说新值添加到数据库没问题,我的问题是更新ListBox以反映新值。有人有任何想法,可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

我捣乱了,直到我发现了一些我需要做的事情。它可能不是完成任务的最有效或最优雅的方式,但它至少有效(也许有人会在某天遇到不同的解决方案)。

我最终做的是在第一次调用的成功中再次进行 $,ajax()调用

$("#AddNewSkill").click(function () {
    $("#AddNewSkill").attr("disabled", true);
    $("#newSkill").attr("disabled", true);
    var data = { name: $("#newSkill").val(), description: "", type: "skill" };
    data = JSON.stringify(data)
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "../WeddingPhotographerService.svc/AddNew",
        data: data,
        dataType: "json",
        success: function () {
            $.ajax({
                type:"POST",
                datatype:"json",
                url: "../Account/GetSkills",
                success:updateSkillsListBox
            });
        },
        error: function (msg) {
            alert(msg.d);
        }
    });
});

function updateSkillsListBox(data, status) {
    $("#Skills").html("");
    for(var d in data) {
        $("<option value=\"" + data[d].Value + "\">" + data[d].Name + "</option>").appendTo("#Skills");
}