Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I use Jquery Ajax Form Plugin to upload file. Codes:

AuthorViewModel

public class AuthorViewModel
{
    public int Id { get; set; }

    [Required(ErrorMessage = "{0} alanı boş bırakılmamalıdır!")]
    [Display(Name = "Yazar Adı")]
    public string Name { get; set; }

    [Display(Name = "Kısa Özgeçmiş")]
    public string Description { get; set; }

    [Display(Name = "E-Posta")]
    public string Email { get; set; }

    public string OrginalImageUrl { get; set; }

    public string SmallImageUrl { get; set; }
}

Form

@using (Html.BeginForm("_AddAuthor", "Authors", FormMethod.Post, new { id = "form_author", enctype = "multipart/form-data" }))
{
    <div class="editor-label">
        <input type="file" name="file" id="file" />
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.ValidationMessageFor(model => model.Name)
    </div>

    ...

    <div class="submit-field">
        <input type="submit" value="Ekle" class="button_gray" />
    </div>
}

Script

<script>
$(function () {
    $('#form_author').ajaxForm({
        beforeSubmit: ShowRequest,
        success: SubmitSuccesful,
        error: AjaxError
    });
});

function ShowRequest(formData, jqForm, options) {
    $(".loading_container img").show();
}

function AjaxError() {
    alert("An AJAX error occured.");
}

function SubmitSuccesful(result, statusText) {
    // Veritabanı işlemleri başarılı ise Index sayfasına
    // geri dön, değilse partial-view sayfasını yenile
    if (result.url) {
        window.location.href = result.url;
    } else {
        $(".authors_content_container").html(result);
    }
}
</script>

Controller

[HttpPost]
public ActionResult _AddAuthor(AuthorViewModel viewModel, HttpPostedFileBase file)
{
    ...
    viewModel.OrginalImageUrl = file.FileName;
    ...
}

Above codes work fine

Question

As you see, I post file seperate from ViewModel. Is there a way to add HttpPostedFileBase file property to ViewModel and bind it to viewModel in view, And post it to controller in ViewModel?

I hope , I can explain.

EDIT:

This codes work fine. I dont want post , viewModel and HttpPostedFile seperately. I want something like this: (If it is possible.)

Model 

public class AuthorViewModel
{
    public int Id { get; set; }

    [Required(ErrorMessage = "{0} alanı boş bırakılmamalıdır!")]
    [Display(Name = "Yazar Adı")]

    HttpPostedFileBase file{ get; set; }
    ...
}

Controller

[HttpPost]
public ActionResult _AddAuthor(AuthorViewModel viewModel)
{
    var file = viewModel.file;
    ...
}

Thanks.

share|improve this question
Not similar, my codes are working. I asked different thing. – AliRıza Adıyahşi Feb 13 at 6:47

2 Answers

up vote 2 down vote accepted

Yes you can add AliRıza Adıyahşi.

Here is the property to do it:

public HttpPostedFileBase File { get; set; }

Now in you form you should add enctype as Xiaochuan Ma said:

@using (Html.BeginForm("_AddAuthor", "Authors", FormMethod.Post, new { id = "form_author", enctype="multipart/form-data" }))
{
    <div class="editor-label">
        <input type="file" name="file" id="file" />
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.ValidationMessageFor(model => model.Name)
    </div>

    ...

    <div class="submit-field">
        <input type="submit" value="Ekle" class="button_gray" />
    </div>
}

On you Controller action:

[HttpPost]
public ActionResult _AddAuthor(AuthorViewModel viewModel, HttpPostedFileBase file)
{
    if(file!=null)
    {
        viewModel.File=file; //Binding your file to viewModel property
    }
    //Now you can check for model state is valid or not.
    if(ModelState.IsValid)
    {
        //do something
    }
    else
    {
        return View(viewModel);
    }
}

Hope it helps. Is this what you need ?

EDIT

There is nothing additional to do. Its automatically binding to viewModel.

[HttpPost]
public ActionResult _AddAuthor(AuthorViewModel viewModel)
{
      var uploadedfile = viewModel.File;// Here you can get the uploaded file.
      //Now you can check for model state is valid or not.
    if(ModelState.IsValid)
    {
        //do something
    }
    else
    {
        return View(viewModel);
    }
}

This worked for me !

share|improve this answer
misunderstood, review edited Question. I use a plugin, so there is no need enctype. code work... – AliRıza Adıyahşi Feb 13 at 6:47
I want to put HttpPostedFileBase in to ViewModel. – AliRıza Adıyahşi Feb 13 at 8:26
@AliRızaAdıyahşi you can put HttpPostedFileBase in vm, but how can you fill it in your view. we dont have helper for <input type=file right ? – karthik Feb 13 at 8:40
Yes, I've already asked this how can I fill it in my view? Is it possible to bind file to VM with another way? – AliRıza Adıyahşi Feb 13 at 8:49
@AliRızaAdıyahşi Please check my edit. try placing the debugger in your action result and check whether you have got the posted file to viewModel or not – karthik Feb 13 at 8:59
show 2 more comments
up vote 0 down vote

Yes, you can add HttpPostedFileBase in to your ViewModel, and add enctype = "multipart/form-data" to your From in HTML.

Check with this link: MVC. HttpPostedFileBase is always null

share|improve this answer
misunderstood, review edited Question. I use a plugin, so there is no need enctype. code work... – AliRıza Adıyahşi Feb 13 at 6:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.