How to Upload File using jTable Create Dialog in Asp.Net MVC?

Question

i am using jTable for my CRUD operation. But now i want to upload file using jTable create dialog form

How do i upload file using jTable create dialog?

<div id="PersonTable" style="width: 580px; margin: auto;"></div>

<script type="text/javascript">

    $(document).ready(function () {

        //Prepare jtable plugin
        $('#PersonTable').jtable({
            title: 'The Campus List',
            actions: {
                listAction: '/Home/CampusList',
                deleteAction: '/Home/DeletePerson',
                updateAction: '/Home/UpdatePerson',
                createAction: '/Home/CreatePerson'
            },
            paging: true,
            fields: {
                CampusId: {
                    key: true,
                    create: false,
                    edit: false,
                    list: true
                },
                CampusName: {
                    title: 'CampusName',
                    width: '15%'
                },
                CampusCode: {
                    title: 'CampusCode',
                    list: true
                },Image: { } // for uploading file
            }
        });

        //Load person list from server
        $('#PersonTable').jtable('load');
    });

</script>

score 0 · Answer 1 · edited May 23 '17 at 12:15

By default Jquery-JTable do not have file Upload fields but you can use this way :

Use "input" attribute in fields scope of jtable with return "Div" or fileupload controls

such as this :

 fields: {
           ,
            Attach: {
               input : function (data){
                return "<input type='file' ...  >"; // OR----->
                return "<asp:FileUpload ....    >" ;// or----->   
               }
          },

But File upload need Full post back and all text areas on your page after File Upload post back was cleaned , so you need Jquery and Iframe for Ajax upload file or jquery plugin for upload them . you can use this address for complete it :

How to display an IFRAME inside a jQuery UI dialog

How to make Asynchronous(AJAX) File Upload using iframe?

Issue with jQuery / iframe File Uploading Solution

How to Upload File using jTable Create Dialog in Asp.Net MVC?

1 Answers1