如何根据mvc中的类别检索图像

时间:2017-02-21 06:33:39

标签: javascript jquery ajax asp.net-mvc-4 drop-down-menu

我正在尝试创建一个项目并陷入下拉列表中,我需要根据从下拉列表中选择的类别获取图像,为此我有两个表类别和图像  模型

public partial class Image
{
    public int Id { get; set; }
    public int CategoryId { get; set; }
    public string ImgTitle { get; set; }
    public string ImgUrl { get; set; }

    public virtual Category Category { get; set; }
}

public partial class Category
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public Category()
    {
        this.Images = new HashSet<Image>();
    }

    public int Id { get; set; }
    public string CatName { get; set; }

    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<Image> Images { get; set; }
}

categoryId是Images类的外键。按类别明智我添加了图片。

控制器

    public ActionResult Gallery()
    {
        ViewBag.CategoryId = new SelectList(db.Categories, "Id", "CatName");
        return View();
    }

    public PartialViewResult GetImageRecord(int Id)
    {
        var img = db.Images.Where(e => e.Id == Id).FirstOrDefault();
        return PartialView("_TestPartial", img);
    }

查看

  @model ckeditor.Models.Image


  @Html.LabelFor(m=>m.CategoryId,"category")
   @Html.DropDownList("CategoryId", null , htmlAttributes: new { @class = "form-control", @id = "ddl" })
  <div id="partialDiv">
  @Html.Partial("_TestPartial")
  </div>
   <script>
        $(document).ready(function () {

    $("#ddl").on("change", function () {

        url: '/Gallery/GetImageRecord/' + $("#ddl option:selected").val(),

        $.ajax({
            url: '/Gallery/GetImageRecord/' + $("#ddl option:selected").val(),
            type: 'GET',
            data: "",
            contentType: 'application/html; charset=utf-8',
            dataType: 'html',
            success: function (data) {
                $("#partialDiv").html(data);
            },
            error: function () {
                alert("error");
            }
        });

    });

});

部分页面

 @model List<ckeditor.Models.Image>


 <div class="row">
  @for (var j = 0; j < Model.Count(); j++)
   {
    <img src="@Url.Content("~/Pictures/" + @Html.DisplayFor(m => m[j].ImgUrl))" style="width:auto;height:300px;" />
}

我使用jquery和ajax从表中检索图像,并使用选定的索引从下拉列表中选择更改。在这里,我没有得到任何错误,但没有得到我选择的类别中的图像。任何人都可以帮我解决问题,显示图像??

0 个答案:

没有答案